标签：响应 数据 setup toRef 语法 reactive state vue3 ref
链接：http://ggz.longpanda.top/article_detail?id=23 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>
标签：响应,数据,setup,toRef,语法,reactive,state,vue3,ref 来源： https://www.cnblogs.com/web-zqk/p/16107599.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。