📖 第二节:Vue实例与插值语法
📑 1、Vue实例理解
📑 2、Vue的插值语法
📑 3、数据响应式
1、Vue实例理解
继续打开上次运行的代码,我们用一个变量去接受new Vue的结果(是一个Vue类的实例对象)
打开网页(这里推荐一款VScode插件:Live Server,具体使用请自行百度),我们看看控制台结果如何:
那我们看到在Vue的实例里面,有很多很多属性,而且我们还找到了我们在data里面存放的name变量
Vue的实例很重要,我们必须要对它有一定深度的了解,不然后续写代码可能会出现各种你认为是对的代码,而Vue却不认可情况!!!。
我们就暂时先不看其他的,就看我们写的那个name,那么Vue到底做了一些什么事情呢?
- 首先是通过new Vue中的来读取Vue构造函数里面的内容(由于我们Vue构造函数里面只写了el和data,所以我们重点说data)
- 在构造函数执行过程中,Vue还帮你做了一件非常重要的事情,那就是数据代理,通过数据代理,Vue将data里面的所有数据放入到此次的Vue实例身上
- 当数据代理完成后, 我们还发现Vue的实例里面还有一项值——_data,Vue在这种也做了一件非常有趣的事情(数据劫持),不信你展开==_data==看看,里面也有data里面的数据项内容。
在完成上面一系列的事情之后,Vue开始对页面进行了渲染加工,也就是布局Vue所接管的一些属性变量到页面上。
2、Vue的插值语法
在Vue的插值语法里面,你可以填入以下数据或者表达式:
-
data里面的属性值
-
Vue实例里面的所有值
-
简单的判断语句,如:三目运算表达式。
-
简单JS表达式,如四则运算或者js的API函数
-
Vue的接管方法的数据调用
-
…
3、数据响应式
可能你们会好奇,Vue是怎么做到数据响应式功能的,那什么是数据响应式呢
数据响应式是指,当Vue所接管的数据值发生了变化,而且被Vue所监测到,最终页面上依赖这数据值的地方也同时发生变化,这就是叫数据响应式。
Vue的数据响应式功能,完完全全就是依赖于对象值的两个调用函数,get()和set()
你会发现,Vue会为每一个接管的值加上getter方法和setter方法,
- getter方法可以监控返回Vue所认为需要的值
- setter方法可以检测目标项的值发生了变化,并且在这里做一些Vue事情
- 如此综上就完成了对数据响应式的过程(当然上面只是简略说说,实际情况更为复杂)。
具体原因,下节我们探讨Object的defineProperty方法就会加深理解。