共计 1603 个字符，预计需要花费 5 分钟才能阅读完成。
这篇文章给大家分享的是有关 vue 指令的三要素有哪些的内容。丸趣 TV 小编觉得挺实用的，因此分享给大家做个参考，一起跟随丸趣 TV 小编过来看看吧。
vue 指令的三要素是响应式、模板引擎和渲染。响应式是指当更新或者增加数据时，页面会有响应，重新渲染对应的数据；模板本质上是字符串，模板最终转换成 js 代码。
本文操作环境：windows10 系统、Vue2.9.6 版，DELL G3 电脑。
vue 指令的三要素是什么
veu 中的三要素
响应式：vue 如何监听到 data 每个属性变化?
模板引擎：vue 的模板如何被解析，指令如何处理？
渲染：vue 的模板如何被渲染成 html? 以及渲染过程
vue 如何实现是响应式
Object.defineProperty模拟
1) 什么是响应式
修改 data 属性之后，vue 立刻监听
data 属性被代理到 vm 上
2) Object.defineProperty
语法：
Object.defineProperty(obj, prop, descriptor)参数说明：
obj：必需。目标对象
prop：必需。需定义或修改的属性的名字
descriptor：必需。目标属性所拥有的特性
基础
var obj = {
name: zhangsan ,
age: 25
console.log(obj.name); // 获取属性的时候，如何监听
obj.age = 26; // 赋值属性的时候，如何监听 我们用 defineProperty 方法实现上面的操作: 如下
var obj = {}
var name = zhangsan
Object.defineProperty(obj, name , { get: function () {
console.log( get
return name;
},
set: function (newVal) {
console.log( set
name = newVal;
}
console.log(obj.name); // 可以监听到
obj.name = lisi // 可以监听到
使用 defineProperty 我们就可以监听到数据变化了。其中这个也是 vue 做响应工做核心的方法了。
3) 模拟
var mv = {}
var data = {
price: 100,
name: zhangsan
var key, value;
for (key in data) {
// 命中闭包。新建一个函数，保证 key 的独立的作用域
(function (key) {Object.defineProperty(mv, key, { get: function () {
console.log( get
return data[key];
},
set: function (newVal) {
console.log( set
data[key] = newVal
}
})(key);
}
vue 的模板如何被解析
模板是什么
render 函数
render 函数 与 vdom
1) 模板是什么
本质：字符串
有逻辑，如 v-if v-for 等
与 html 格式很像，但有很大的区别
最终还要转换成 html 来显示
模板最终必须转换成 JS 代码, 因为：
有逻辑（v-if v-for）, 必须用 JS 才能实现 (图灵完备)
转换为 html 渲染页面，必须用 JS 才能实现
因此，模板最重要转换成一个 JS 函数
基础事例
div id= app
div
input v-model= title
button v-on:click= add submit /button
/div
ul
li v-for= item in list {{item}} /li
/ul
/div以上就是一个模板。
感谢各位的阅读！关于“vue 指令的三要素有哪些”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
