Vue3.0 reactive与ref :VCA模式

简介

Vue3 最大的一个变动应该就是推出了 CompositionAPI，可以说它受ReactHook 启发而来；它我们编写逻辑更灵活，便于提取公共逻辑，代码的复用率得到了提高，也不用再使用 mixin 担心命名冲突的问题。

ref 与 reactive 是 Vue3 新推出的主要 API 之一，它们主要用于响应式数据的创建。

reactive 能做的，ref 都能胜任，并且 ref 底层还是使用 reactive 来做的!!!

ref 函数可以接收原始数据类型与引用数据类型

reactive 函数只能接收引用数据类型。

当你明确知道需要包裹的是一个对象，那么推荐使用 reactive，其他情况使用 ref 即可

reactive包装函数

<template><div><!-- 案列1 --><button @click="myClick">点我</button><div>{{ obj.name }}--{{ obj.age }}</div><div>{{ obj2.email }}</div><!-- <div>{{ obj3 }}</div> --><hr><!-- 列表案列 --><ul><li v-for="item in obj.datalist" :key="item">{{ item }}</li></ul><!-- 模糊查询案列 --><input type="text" v-model="obj.mytitle"><ul><li v-for="item in GetSelectItems()" :key="item">{{ item }}</li></ul></div>
</template>
<script>
import { reactive } from 'vue';
export default {setup() {//用reactive是一个包装函数，包装后就得到了一个响应式对象obj (setup中可以存在多个reactive，只是正常情况下一个就够用了，比如下面的obj 和obj2)//注意const是申明常量的，常量不是不可变的吗？为什么还可以通过obj.name = "李四"来改变它呢？ //其实obj只是reactive({name: "张三",age: 29})这个对象的一个引用(指针)，obj不能再进行修改，只是说obj不能再指向其他的对象了，例如:obj="aaa"就会报错，因为obj所指向对象的引用已经变化了。//但是obj指向的这个对象它本身的属性是可以修改的,所以 obj.name = "李四"不会报错const obj = reactive({name: "张三",age: 29,datalist: ["aaa", "bbb", "ccc"],mytitle: ""})const obj2 = reactive({ email: "[e-mail]" })//const obj3=reactive("张三"); //reactive不支持这种简单类型的包装，它只支持复杂类型的包装，如对象，数组等。//const obj3=reactive("");     //reactive不支持这种简单类型的包装//const obj3=reactive(1);      //reactive不支持这种简单类型的包装const myClick = () => {obj.name = "李四"}const GetSelectItems = () => {//includes() 方法用于判断字符串是否包含指定的子字符串//filter方法是过滤方法， item表示当前遍历datalist数组的项，如果当前项包含了input中输入的值，则找出来，然后统一返回一个数组var selectIitemArr = obj.datalist.filter(item => item.includes(obj.mytitle))return selectIitemArr;}//所有的函数与对象都需要在return中进行返回//obj，myClick是定义在setup中的，它只能在setup中使用，为了在setup外面使用(例如DOM中)我们就必须要把他们暴露出去，就需要放到return中进行返回return {obj, //等同于obj:objobj2,obj3,myClick, //返回myClickGetSelectItems,}}
}</script>

ref包装函数

<template><div><!-- 案列1 --><button @click="myClick">点我</button><div>{{ obj.name }}--{{ obj.age }}</div><div>{{ obj2.email }}</div><div>{{ obj3 }}</div><div>{{ obj4 }}</div><div>{{ obj5 }}</div><div>{{ obj6?"中国":"美国" }}</div><hr><!-- 列表案列 --><ul><li v-for="item in obj.datalist" :key="item">{{ item }}</li></ul><!-- 模糊查询案列 --><input type="text" v-model="obj.mytitle"><ul><li v-for="item in GetSelectItems()" :key="item">{{ item }}</li></ul></div>
</template>
<script>
import { reactive, ref } from 'vue';
export default {setup() {//用reactive是一个包装函数，包装后就得到了一个响应式对象obj (setup中可以存在多个reactive，只是正常情况下一个就够用了，比如下面的obj 和obj2)//注意const是申明常量的，常量不是不可变的吗？为什么还可以通过obj.name = "李四"来改变它呢？ //其实obj只是ref({name: "张三",age: 29})这个对象的一个引用(指针)，obj不能再进行修改，只是说obj不能再指向其他的对象了，例如:obj="aaa"就会报错，因为obj所指向对象的引用已经变化了。//但是obj指向的这个对象它本身的属性是可以修改的,所以 obj.value.name = "李四"不会报错const obj = ref({name: "张三",age: 29,datalist: ["aaa", "bbb", "ccc"],mytitle: ""})const obj2 = ref({ email: "[e-mail]" })const obj3=ref("王五"); //ref支持这种简单类型的包装  原理就是new Proxy({value:"王五"}) 注意：在DOM模板中使用{{obj3}}  在<script>中使用需要在后面加.value 如：obj3.valueconst obj4=ref("");     //ref支持这种简单类型的包装  原理就是new Proxy({value:""})const obj5=ref(1);      //ref支持这种简单类型的包装  原理就是new Proxy({value:1})const obj6=ref(true);const myClick = () => {obj.value.name = "李四"}const GetSelectItems = () => {//特别注意：经过ref包装函数包装的对象，在<script>中必须要在对象名称后面.value ，在DOM模板中则不需要.value// 比如:// obj.value.name; 获取obj对象中的name值// obj.value.age;  获取obj对象中的age值// obj.value.datalist; 获取obj对象中的datalist值// obj.value.mytitle;  获取obj对象中的mytitle值//includes() 方法用于判断字符串是否包含指定的子字符串//filter方法是过滤方法， item表示当前遍历datalist数组的项，如果当前项包含了input中输入的值，则找出来，然后统一返回一个数组var selectIitemArr = obj.value.datalist.filter(item => item.includes(obj.value.mytitle))return selectIitemArr;}//所有的函数与对象都需要在return中进行返回//obj，myClick是定义在setup中的，它只能在setup中使用，为了在setup外面使用(例如DOM中)我们就必须要把他们暴露出去，就需要放到return中进行返回return {obj, //等同于obj:objobj2,obj3,obj4,obj5,obj6,myClick, //返回myClickGetSelectItems,}}
}</script>

reactive与ref共存

<template><div><!-- 案列1 --><button @click="myClick">点我</button><div>{{ obj.name }}--{{ obj.age }}</div><div>{{ obj2.email }}</div><hr><!-- 可以直接用mydata --><ul><li v-for="item in mydata" :key="item">{{ item }}</li></ul><!-- 也可以将mydata放到reactive包装函数中然后通过obj对象来用 --><ul><li v-for="item in obj.mydata" :key="item">{{ item }}</li></ul><ul><li v-for="item in mylist.mydata" :key="item">{{ item }}</li></ul><div>{{mylist.obj.name}}</div></div>
</template>
<script>
import { reactive, ref } from 'vue';
export default {setup() {//有一种情况就是通过import导入的组件(JS)中存在用ref包装的，而我们当前组件组件用的是reactive包装的，为了保持风格统一(当然不统一也行)我们也可以将ref中的包装对象直接放到reactive包装函数中：//举列：const mydata = ref([1, 2, 3]);//我们可以直接用mydata，也可以将mydata放到reactive包装函数中const obj = reactive({name: "张三",age: 29,datalist: ["aaa", "bbb", "ccc"],mytitle: "",mydata //也可以将ref包装函数包装的对象mydata放到reactive包装函数中})const mylist=ref({mydata, obj //也可以将reactive包装函数包装的对象obj放到ref包装函数中})const obj2 = reactive({ email: "[e-mail]" })return {obj, //等同于obj:objobj2,mydata,mylist}}
}
</script>