赞
踩
1.ref和reactive的区别
2.watch和computed,watchEffect
3.获取dom结点
4.子向父传数据,父向子传数据
5.props和emit
6.动态组件
7.阻止冒泡行为
8.插槽
9.provide和inject
10.异步组件
11.组合式函数
12.自定义指令
13.teleport
14.Suspense
vue2得各种写法可以访问vue3
// 创建应用实例对象 类似于Vue2的vm(比vm更加轻)
const app = createApp(App)
// 返回一个对象
return {
a,
age,
getAge,
};
import {h}from 'vue'
// 返回一个渲染函数
return () => h("h1", "abc");
emit在向父组件传值得时候,需要通过emits选项来确定传出去的值是什么。
1.渲染函数 return () => h("h1", "abc");
import { ref } from "vue";
let a = ref(10);
let age = ref(5);
function getAge() {
a.value = 11;
age.value = 10;
}`person.fullAge = computed(() => {
return person.age + person.name;
});`
这个存在数据缓存以及不要在computed中使用异步函数。
如果你想要返回一个对象的话,那么箭头函数就得这么写(()=>({}))
//computed中间是一个回调函数
const value = computed(() => {
// 默认是get
return x.a.b;
});
2.如果我们想直接修改computed值的话就要通过set方法。
const value = computed({
//默认情况下
get() {
return x.a.b;
},
// value = 10时候,调用这个。
set(value) {
x.a.b = value + 1;
},
});
普通数据类型 watch(基础数据类型,回调函数,配置对象)
引用数据类型 watch(()=>(return 引用数据里面的值),回调函数,配置对象)
watch(
//侦听基础数据类型的时候
y,
(newValue, oldValue) => {
console.log(newValue, oldValue);
}
);
//侦听对象
watch(
//如果是对象的话就写成getter函数,否则有问题,同时还可以用watchEffect来进行
() => x[0].a,
(a) => {
console.log(a);
}
);
可以替换watch侦听引用数据类型
可以根据一个数据发生变化之后里面进行异步操作等
如果你想在一个数据展现为true之后立马访问dom的话,那么配置项对象中配置 flush: 'post'
watchEffect(() => {
//这个可以实例创建之后直接执行一次。
//可以代替watch侦听引用数据类型的变化。
const sum = agE.value;
console.log("123" + sum);
});
const y = ref(10)
//只要y发生变化那么就会执行一次watchEffect
watchEffect(async () => {
const data = await a1(y.value);
console.log(data);
});
<input ref='koko'/>
const koko = ref(null);
console.log(koko.value.innerHTML)
父向子
//在子组件上面添加这个
defineProps(['title'])
//如果需要添加数据类型的时候
const props = defineProps({
foo: String
})
子向父
1.第一种写法
//子组件
<button @click='$emit('自定义的事件名')'/>
//父组件
<hoho @自定义的事件名='change'/>
2.第二种写法
//子组件
defineEmits(['enlarge-text'])
//父组件
<hoho @enlarge-text='change'/>
defineEmits和defineProps中间的参数都是数组
如果在模块中emit的话可以使用$emit,如果在script中的话那么就定义一个emit来使用。
import {defineEmits,defineProps} from 'vue'
1.不校验版本
const emit = defineEmits(['showshow'],1)
2.校验版本
const emit = defineEmits((value)=>{
if(value){
console.log(123)
//必须得有返回值
return true
}
})
1.不校验版本
const prop= defineProps(['value'])
2.校验版本
const emit = defineProps({
value:String
})
function addMessage(){
emit('showshow',{
name:'li',
age:10
})
}
<button @click="qwe='xixi'">+</button>
<component :is='value[qwe]'></component>
import help from "@/components/help.vue";
import xixi from '@/components/xixi.vue'
let qwe = ref('help')
let value = {
help,
xixi
}
此时会触发冒泡行为
//组件上
<component :is='value[qwe]' @click="add"></component>
//组件内部
<button @click="addMessage">add</button>
阻止冒泡得行为如下:
<script>
// 使用普通的 <script> 来声明选项
export default {
inheritAttrs: false
}
</script>
1.普通插槽
<component :is='value[qwe]'>
1
</component>
//组件内部就显示1
<slot/>
2.具名插槽
<component :is='value[qwe]'>
//使用模板
<template #footer>
1
</template>
</component>
<slot name='footer'/>
3.带值插槽
<component :is='value[qwe]'>
<template #footer="obj">
{{obj.title}}
</template>
</component>
<slot name='footer' title='天气不错'/>
可以解决祖和孙进行数据的交互
多依赖的话 可以创建一个key.js的文件 然后里面存放我们需要注入的内容
// keys.js
export const myInjectionKey = Symbol()
// 在供给方组件中
import { provide } from 'vue'
import { myInjectionKey } from './keys.js'
provide(myInjectionKey, { /*
要提供的数据
*/ });
// 注入方组件
import { inject } from 'vue'
import { myInjectionKey } from './keys.js'
const injected = inject(myInjectionKey)
祖组件
provide('location',{
x:'10',
y:'20'
})
孙组件
const {x,y} = inject('location')
基于的原理就是promise
import xixi from '@/components/xixi.vue'
const great = defineAsyncComponent(()=>{
return new Promise((resolve)=>{
setTimeout(()=>{
resolve(xixi)
},2000)
})
})
把我们需要的内容全部抽离出来重新组装成一个函数
1.event.js
import { onMounted, onUnmounted } from "vue";
export function useEventListener(target,event,callback){
onMounted(()=>{
target.addEventListener(event,callback)
})
onUnmounted(()=>{
target.removeEventListener(event)
})
}
2.mouse.js
import {ref } from "vue"
import {useEventListener} from '@/use/event.js'
export function useMouse(){
const z = ref(0)
const y = ref(0)
useEventListener(window,'mousemove',function(event){
z.value = event.pageX
y.value = event.pageY
})
return {z,y}
}
3.引入该公用函数
import {useMouse} from '@/use/mouse.js'
const {z,y} = useMouse()
组合式函数的写法就是:
const vFocus = {
mounted:(el)=>{
el.focus();
}
}
非组合式写法:
directives: {
// 在模板中启用 v-focus
focus: {
/* ... */
}
}
模态框十分适用
父元素有position,但是模态框并不受这个影响。
<div class="mask1">
1.定位到我们想要的body身上。
<teleport to='body'>
<div class="mask" v-if="show">
<div class="content">
<button @click="show=false"></button>
</div>
</div>
</teleport>
</div>
<Suspense>
//如果great组件加载失败的话,那么可以一直是loading
<great :value='{z,y}'/>
<template #fallback>
<h1>loading</h1>
</template>
</Suspense>
import {toRefs} from ‘vue’
let person = reactive({
age: 10,
name: “li”,
hobby: [1, 2, 3],
a: {
b: {
c: 10,
},
},
});
return {
…toRefs(person),
};
## shallowReactive函数
- 就是浅拷贝数据对象。
- 让自己自增,页面不会显示,但是让别的自增,之前自己的自增就会显现出来。
`让c自增页面不会显示,但是自增age的话c就会在页面显示最新的数据。`
```javascript
let person = shallowReactive({
age: 10,
name: "li",
hobby: [1, 2, 3],
a: {
b: {
c: 10,
},
},
});
person = readonly(person);
##customRef函数
function myRef(value) {
// 闭包 返回一个函数,参数是一个函数
return customRef((track, trigger) => {
// 返回一个对象
return {
// 第一步
get() {
// 第四步
// 通知vue追踪数据的变化
track();
return value;
},
// 第二步
set(newValue) {
value = newValue;
// 延迟解析模板
setTimeout(() => {
// 第三步
// 通知vue重新解析模板
trigger();
}, 2000);
},
};
});
}
// 自定义函数的返回参数
let data = myRef(123);
<!-- 异步组件 -->
<Suspense>
<!-- 成功得时候 -->
<template v-slot:default> </template>
<!-- 失败的时候 -->
<template v-slot:fallback> </template>
</Suspense>
import { defineAsyncComponent } from "vue";
异步组件
const child = defineAsyncComponent(() => import("./"));
同时这个可以配合promise对象来使用。
// 等同于vue.prototype,往原型链上面添加值。
app.config.globalProperties;
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。