本文介绍了Vue中el和data的两种不同写法，强调在组件化时data必须用函数式。重点讨论了MVVM模型，其中数据代理使得通过Vue实例可以直接操作data中的属性。同时，解释了数据代理的基本原理，即通过Object.defineProperty实现数据的setter/getter。此外，还提醒读者在使用箭头函数时需谨慎，避免改变this的指向。
data与el的两种写法
1.el又两中写法
(1).new Vue时候配置el属性
(2).先创建Vue实例随后在通过v.$mount('#root')(括号里面绑定值是divId里面的值)指定el的值
2.data有2中写法
(1).对象式
(2).函数式
如何选择：目前哪种方法都可以使用，以后学习到组件时，data必须使用函数式，否则会报错
重要原则：
有vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是vue实例了
MVVM模型
1.M：模型(Model):data中的数据
2.V：视图(View)：模板代码
3.VM：视图模型(ViewModel)：Vue实例
观察发现：
1.data中所有的属性，最后都会出现在vm身上
2.vm身上所有的属性及Vue原型上搜友属性，在Vue模板中都可以直接使用
1.Vue中的数据代理
通过vm对象来代理data对象中属性的操作(读/写)
2.Vue中数据代理的好处
更加方便的操作data中的数据
数据代理视图如下：
3.基本原理
通过Object.definePriperty()把data对象中所有属性添加到vm上
为每一个添加到vm上的属性，都定义一个getter/setter
在getter/setter内部去操作(读/写)data中对象的属性
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
