這篇文章主要講解了“vue指令三要素指的是什么”，文中的講解內(nèi)容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“vue指令三要素指的是什么”吧！

成都創(chuàng)新互聯(lián)是專業(yè)的黃陵網(wǎng)站建設公司，黃陵接單;提供成都網(wǎng)站設計、網(wǎng)站制作、外貿(mào)營銷網(wǎng)站建設,網(wǎng)頁設計,網(wǎng)站設計,建網(wǎng)站,PHP網(wǎng)站建設等專業(yè)做網(wǎng)站服務;采用PHP框架,可快速的進行黃陵網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團隊,希望更多企業(yè)前來合作!

vue指令的三要素是響應式、模板引擎和渲染。響應式是指當更新或者增加數(shù)據(jù)時，頁面會有響應，重新渲染對應的數(shù)據(jù)；模板本質(zhì)上是字符串，模板最終轉(zhuǎn)換成js代碼。

本文操作環(huán)境：windows10系統(tǒng)、Vue2.9.6版，DELL G3電腦。

vue指令的三要素是什么

veu中的三要素

• 響應式：vue如何監(jiān)聽到 data 每個屬性變化?

• 模板引擎：vue的模板如何被解析，指令如何處理？

• 渲染：vue 的模板如何被渲染成 html?以及渲染過程

vue 如何實現(xiàn)是響應式

Object.defineProperty

模擬

1) 什么是響應式

修改 data 屬性之后， vue 立刻監(jiān)聽

data 屬性被代理到 vm 上

2) Object.defineProperty

語法：

Object.defineProperty(obj, prop, descriptor)

參數(shù)說明：

• obj：必需。目標對象

• prop：必需。需定義或修改的屬性的名字

• descriptor：必需。目標屬性所擁有的特性

基礎

var obj = {
  name: 'zhangsan',
  age: 25
}
 
console.log(obj.name); // 獲取屬性的時候，如何監(jiān)聽
obj.age = 26; // 賦值屬性的時候，如何監(jiān)聽

我們用defineProperty方法實現(xiàn)上面的操作:如下

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); // 可以監(jiān)聽到
obj.name = 'lisi'; // 可以監(jiān)聽到

使用defineProperty我們就可以監(jiān)聽到數(shù)據(jù)變化了。其中這個也是 vue 做響應工做核心的方法了。

3) 模擬

var mv = {}
 
var data = {
  price: 100,
  name: 'zhangsan'
}
 
var key, value;
for (key in data) {
 
  // 命中閉包。新建一個函數(shù)，保證 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 函數(shù)

render 函數(shù) 與 vdom

1) 模板是什么

本質(zhì)：字符串

有邏輯，如 v-if v-for等

與 html 格式很像，但有很大的區(qū)別

最終還要轉(zhuǎn)換成 html 來顯示

模板最終必須轉(zhuǎn)換成 JS 代碼, 因為：

有邏輯（v-if v-for）,必須用 JS 才能實現(xiàn)( 圖靈完備)

轉(zhuǎn)換為 html 渲染頁面，必須用 JS 才能實現(xiàn)

因此，模板最重要轉(zhuǎn)換成一個 JS 函數(shù)

基礎事例

 
    

      
      submit
    
    

      {{item}}