vue3语法-响应式数据和组合setup
setup和mixins的区别
Mixin的缺陷：
1、很容易发生冲突：因为每个 mixin 的 property 都被合并到同一个组件中，所以为了避免 property 名冲突，你仍然需要了解其他每个特性。
2、可重用性是有限的：我们不能向 mixin 传递任何参数来改变它的逻辑，这降低了它们在抽象逻辑方面的灵活性。
因此，为了解决这些问题，我们添加了一种通过逻辑关注点组织代码的新方法：组合式 API。
数组和对象的赋值
注意：对象和数组直接赋值不能触发响应式，push或者根据索引遍历赋值可以保留reactive数组的响应性，或者将数组存在一个对象内，如下：
推荐：
const state = reactive({
arr: []
})
state.arr = [];
不能
const arr = reactive([])
arr = []
ref
ref ： 为数据添加响应式状态，不会影响原始数据 ，一次只能定义一个ref响应式数据.
应用：需要触发页面更新，可用于任何类型的数据创建响应式（传入引用类型，实际内部又调用reactive方法为其创建响应式），但官方建议用于基本数据类型。通过.value 的方式去访问其数据
原理：ref 则是用把数据给包装成 ref 对象, .value 的方式去访问其数据,在 setup 中吗,在模板中不需要, 因为会自动添加.value。vue 强烈建议 ref 用来处理 非指针类型的数据类型, string number 等, 通过给 value 属性添加 getter/setter 来实现对数据的劫持
reactive
reactIve：用来处理对象，数组，等指针类型的数据
应用：需要触发页面更新，只用于创建引用类型数据的响应式。解构会失去响应式，所以解构需配合toRefs使用
原理：reactive 是利用 proxy 来实现
export default { name:'Page2', setup(){ const state = reactive({ name:"张三", age:20 }) return{ ...toRefs(state)//解构赋值后数据就会失去响应式，需要用toRefs让对象拥有ref响应式属性，UI才会视图更新 } } }
toRef、toRefs
toRef: 使用toRef将某个对象中的属性变成响应式数据，修改响应式数据是会影响到原始数据的。但是需要注意，如果修改通过toRef创建的响应式数据，并不会触发UI界面的更新。 所以，toRef的本质是引用，与原始数据有关联
import {toRef} from 'vue'; export default { name:'App' setup(){ let obj = {name : 'alice', age : 12}; let newObj= toRef(obj, 'name'); function change(){ newObj.value = 'Tom'; console.log(obj,newObj) } return {newObj,change} } }
上述代码，当change执行的时候，响应式数据发生改变，原始数据obj也会改变，但是唯独UI界面不会更新
上面两个介绍了，ref 和 reactive 可以改变页面。接下来这两个则不能去改变页面，但是数据还是会遵循响应式。
小结：
ref和toRef的区别、特点：
(1). ref本质是拷贝，修改响应式数据不会影响原始数据；toRef的本质是引用关系，修改响应式数据会影响原始数据
(2). ref数据发生改变，界面会自动更新；toRef当数据发生改变是，界面不会自动更新
(3). toRef传参与ref不同；toRef接收两个参数，第一个参数是哪个对象，第二个参数是对象的哪个属性
(4). toRef 用于创建对象指定的属性响应式，换句话说就是只能控制一个对象中的一个属性。
(5). toRefs 用于创建对象响应式。
(6). 他们对响应式的处理你可以理解为： toRef 类似 ref， toRefs 类似 reactive
| 类型 | 是否触发页面改变 | 是否可以结构 |
|---|---|---|
| ref | 是 | 否 |
| reactive | 是 | 否 |
| toRef | 否 | 否 |
| toRefs | 否 | 是 |
setup组合用法
rem.js文件:
import {reactive} from 'vue'; function useRemoveStudent() { let state = reactive({ }); function remStu(index) {} return {state, remStu}; } export default useRemoveStudent;
add.js:
import {reactive} from 'vue'; function useAddStudent(state) { let state2 = reactive({ }); function addStu(e) { } return {state2, addStu} } export default useAddStudent;
主文件app.vue
<template> <div></div> </template> <script> import useRemoveStudent from './rem'; import useAddStudent from './add';
export default {
name: 'App',
setup() {
let {state, remStu} = useRemoveStudent();
let {state2, addStu} = useAddStudent(state);
return {state, remStu, state2, addStu} } } </script>
