vue指令三要素指的是什么

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

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

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

vue指令的三要素是什么

veu中的三要素

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

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

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

vue 如何實(shí)現(xiàn)是響應(yīng)式

Object.defineProperty

模擬

1) 什么是響應(yīng)式

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

data 屬性被代理到 vm 上

2) Object.defineProperty

語法：

Object.defineProperty(obj, prop, descriptor)

參數(shù)說明：

• obj：必需。目標(biāo)對(duì)象

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

• descriptor：必需。目標(biāo)屬性所擁有的特性

基礎(chǔ)

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

我們用defineProperty方法實(shí)現(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ù)變化了。其中這個(gè)也是 vue 做響應(yīng)工做核心的方法了。

3) 模擬

var mv = {}
 
var data = {
  price: 100,
  name: 'zhangsan'
}
 
var key, value;
for (key in data) {
 
  // 命中閉包。新建一個(gè)函數(shù)，保證 key 的獨(dú)立的作用域
  (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 代碼, 因?yàn)椋?/p>

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

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

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

基礎(chǔ)事例

 <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>

以上就是一個(gè)模板。

感謝各位的閱讀，以上就是“vue指令三要素指的是什么”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)vue指令三要素指的是什么這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！