vue3.0 reactive,reactive vue
本文主要介绍了对Vue3中无功的深入理解，具有很好的参考价值。希望对你有帮助。如有错误或不足之处，请不吝赐教。
目录
了解VUE 3无功1。什么是无功？2 .反应音符Vue3音符反应函数
Vue3 reactive的理解
1.什么是reactive?
Reactive是Vue3中实现响应式数据的方法。在Vue2中，响应数据由defineProperty实现，而在Vue3中，响应数据由ES6的代理实现。
2.reactive注意点
反应参数必须是一个对象(json/arr)。如果将其他对象传递给reactive，默认情况下会修改对象，界面不会自动更新。如果您想更新它，您可以重新分配它。错误示范
当传递非对象时，页面不会响应。
正确实例
arr正确实例
传入数组被转换为代理对象。
Vue3笔记 reactive函数
作用：定义一个对象类型的响应数据(基本类型不用，用ref函数)语法：Const Proxy object=reactive(源对象)接收一个对象(或数组)并返回一个代理对象(Proxy的实例对象，简称代理对象)。reactive定义的响应式数据是“深度”的。
基于内部ES6的代理实现通过代理对象操作源对象的内部数据。
模板
img alt=Vue logo src=。/assets/logo.png /
H1一个人的信息/h1
H1年龄：{{ p.age }}/h1
H1姓名：{{ p.name }}/h1
H1作业类型：{{ p.job.type }}/h1
H1薪资：{{ p.job.salary }}/h1
H1的爱好：{{ hobby }}/h1
测试的H1数据：{{ p.a.b.c }}/h1
Button @click=changeInfo 修改器的信息/button
/模板
脚本
从导入HelloWorld。/components/hello world . vue ；
从“vue”导入{ ref，reactive }；
导出默认值{
名称：“应用程序”，
组件：{
HelloWorld，
},
setup() {
让爱好=反应性([抽烟，喝酒，打麻将])；
//数据
设p=电抗({
姓名：张三，
年龄：19，
工作：{
类型：“前端工程师”，
工资： 20k ，
},
答：{
乙：{
c: 666666，
},
},
爱好：[抽烟，喝酒，打麻将]，
});
//方法
函数changeInfo() {
console . log(p . job)；
P.name=李四；
p.age=119
p . job . salary= 69k ；
P.job.type=算法工程师；
P.hobby[0]=学习；
爱好[0]=学习算法；
}
返回{
p，
爱好，
changeInfo，
};
},
};
/脚本
总结一下：
Reactive主要用于操纵对象或数组，定义为响应式的数据添加、删除和修改。内部代理是个人经验的形式。希望给大家一个参考，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。