Vue学习笔记4：Vue实例、插值语法与响应式

📖 第二节：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方法就会加深理解。