Vue3全家桶升级指南一composition API
1、setup()
vue3中的composition api中最重要的就是setup方法了,相当于组件的入口,所有的composition api都必须放到setup()中的使用。
setup是在组件实例初始化之前执行的(beforecreated之前),是整个组件的入口函数,这个时候数据和方法还没有进行挂载,因此在setup中this并不会执行当前组件实例,也不能通过this获取组件中的数据和方法了。
在模板中使用到的变量和方法必须在setup中return出来,才能使用。
export default { setup(){ let name="张三" return {name}//必须在这里return,模板中才能使用过 } }
setup中的参数
上面已经说过,因为setup是在beforecreate之前执行的,所以setup中的this并不会指向当前组件实例,this的值为undefined,那么我们怎么和父子组件通信呢(之前可以通过this.$emit触发)?这时就需要用到setup的参数了。
setup有两个参数,第一个是props,父组件传递给当前组件的prop都在这个参数对象中,第二个参数是上下文context,里面包含后attrs,emit,slots,这几个参数的用法就和vue2中的大同小异了,这里不做过多赘述。
2、ref用来定义基础类型的响应式数据
在setup中直接定义的变量不是响应式的,如果需要定义基础类型的响应式变量,需要使用ref来定义
import {ref} from "vue" export default { setup(){ let name = '张三'; settimeout(() => { name = '李四'; console.log(name);//这里的改变了,但是视图并不会更新 }, 2000); return { name }; } }
import {ref} from "vue" export default { let name = ref('张三'); settimeout(() => { name.value = '李四'; console.log(name.value); //李四 }, 2000); return { name }; }
需要注意的是,通过ref定义的变量,在js中使用的时候需要通过.value来获取或者设置值,但是在模板中使用的时候不需要加.value,vue内部已经帮我们处理了。
通过ref获取dom元素或者组件实例
在vue2中要获取dom元素或者组件实例,直接在dom元素或者组件上添加ref="refname",然后在js中通过this.$refs.refname就可以获取了。在vue3中,使用方式略有不同。
- 直接在dom元素或者组件上添加ref="refname"
- 在setup中定义ref,初始值为null,let refname=ref(null),注意变量的名字一定要和dom或者组件上的ref名字保持一致。
- 在js中通过refname.value获取dom元素或者组件实例
- 注意,需要在setup总return使用到的ref变量
<template> <div ref="name">张三</div> <button @click="change">add</button> <hr /> </template> <script> import { ref } from 'vue'; export default { setup() { let name = ref(null); const change = () => { console.log(name.value); name.value.innertext = '李四'; }; return { name, change }; }, }; </script>
3、reactive用来定义引用类型的响应式数据
import { reactive } from 'vue'; export default { setup() { let obj = reactive({ name: '张三', age: 18 }); settimeout(() => { obj.name = '李四'; console.log(obj); //李四 }, 2000); return { obj }; }, };
在模板中直接通过{{obj.name}}就可以访问数据了
4、computed计算属性
创建只读的计算属性
import {ref,computed} from "vue" export default { setup(){ let count=ref(0) let newcount=computed(()=>count.value+10) return {count,newcount} } }
创建可读可写的计算属性,在computed中传入一个对象,通过设置get和set方法创建可读写的计算属性。
import { ref, computed } from 'vue'; export default { setup() { let count = ref(1); let newcount = computed({ get: () => count.value + 100, set: val => (count.value = val - 1), }); let change = () => (newcount.value += 100);//给计算属性赋值会触发set return { count, newcount, change }; }, }
5、watch监听
监听ref类型的单个数据
import { ref, computed, watch } from 'vue'; export default { setup() { let count = ref(1); let newcount = computed({ get: () => count.value + 100, set: val => (count.value = val - 1), }); let change = () => (newcount.value += 100); watch(count, (newval, oldval) => { console.log(newval, oldval); }); return { count, newcount, change }; }, };
监听ref类型的多个值
import { ref, watch } from 'vue'; export default { setup() { let name = ref('张三'); let age = ref(18); settimeout(() => { name.value = '李四'; age.value = 22; }, 2000); watch([name, age], ([newname, newage], [oldname, oldage]) => { console.log(newname, newage); //李四 22 console.log(oldname, oldage); //张三 18 }); return { name, age }; }, };
监听reactive类型的单个值
import { reactive, watch } from 'vue'; export default { setup() { let obj = reactive({ name: '张三', age: 18 }); settimeout(() => { obj.name = '李四'; }, 2000); watch( () => obj.name, (newval, oldval) => { console.log(newval, oldval); //李四 张三 } ); return { obj }; }, };
监听reactive类型的多个值
import { reactive, watch } from 'vue'; export default { setup() { let obj = reactive({ name: '张三', age: 18 }); settimeout(() => { obj.name = '李四'; obj.age = 22; }, 2000); watch( [() => obj.name, () => obj.age], ([newname, newage], [oldname, oldage]) => { console.log(newname, newage); //李四 22 console.log(oldname, oldage); //张三 18 } ); return { obj }; }, };
watch添加配置项
在vue2中watch如果需要添加配置就需要传入一个对象,来配置immediate和deep,在vue3中的watch同样可以在第三个参数里添加配置
import { ref, watch } from 'vue'; export default { setup() { let name = ref('张三'); let age = ref(18); settimeout(() => { name.value = '李四'; age.value = 22; }, 2000); watch( [name, age], ([newname, newage], [oldname, oldage]) => { console.log(newname, newage); console.log(oldname, oldage); }, { immediate: true, deep: true, } ); return { name, age }; }, };
6、watcheffect监听
import { ref, watch, watcheffect } from 'vue'; export default { setup() { let name = ref('张三'); let age = ref(18); settimeout(() => { name.value = '李四'; age.value = 22; }, 2000); watcheffect(() => { console.log(name.value); console.log(age.value); }); return { name, age }; }, };
关闭监听
创建监听的时候可以用一个变量来接收watch或者watcheffect函数的返回值,然后在需要停止监听的地方调用这个匿名函数stop(),就可以关闭了
import { ref, watch, watcheffect } from 'vue'; export default { setup() { let name = ref('张三'); let age = ref(18); settimeout(() => { name.value = '李四'; age.value = 22; }, 2000); settimeout(() => { stop();//在这里关闭监听后,在4秒后就不会再打印信息了 name.value = '李四2'; age.value = 222; }, 4000); let stop = watcheffect(() => { console.log(name.value); console.log(age.value); }); return { name, age }; }, };
watcheffect和watch的区别
- watch默认是惰性的,只有当监听的变量发生改变时才会执行,watcheffect不是惰性的,组件初始化的时候就会执行,改变时也会执行。
- watch需要指定要监听的变量(ref和reactive类型的变量略不同),watcheffect不需要指定,在回调中使用到的响应式变量都会监听,当这些变量改变时,回调都会执行。
- watch可以再改变时获取到新值和旧值,watcheffect只能获取到新值。
上一篇: Redis的字符串是如何实现的