共計 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 指令的三要素有哪些”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
