vue ディレクティブの 3 つの要素は何ですか?

vue ディレクティブの 3 つの要素は、応答性、テンプレート エンジン、レンダリングです。応答性とは、データが更新または追加されるとページが応答し、対応するデータが再レンダリングされることを意味します。テンプレート エンジンは本質的に文字列であり、インスタンスの識別子として使用されます。レンダリングとは、テンプレートを次のように変換するプロセスを指します。他のコード。

この記事の動作環境: Windows 10 システム、Vue バージョン 2.9.6、DELL G3 コンピューター。

vue コマンドの 3 つの要素とは何ですか

veu の 3 つの要素

• ##応答性: vue はデータの各属性の変更をどのように監視しますか?

• テンプレート エンジン: vue テンプレートはどのように解析され、命令はどのように処理されるのでしょうか?

• レンダリング: vue のテンプレートはどのように html にレンダリングされますか? およびレンダリング プロセス

vue はどのようにレスポンシブとして実装されるか

Object.defineProperty

シミュレーション

1) 応答性とは

データ属性を変更した後、vue はすぐにリッスンします

データ属性はプロキシされた vm

2 に移動) Object.defineProperty

構文:

Object.defineProperty(obj, prop, descriptor)

パラメータの説明:

• obj: 必須。ターゲット オブジェクト

• #prop: 必須。定義または変更する属性の名前

• 記述子: 必須。ターゲット属性が所有する特性

Basic

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 関数と vdom

1) テンプレートとは何ですか

本質: string

には 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.js チュートリアル

」]

以上がvue ディレクティブの 3 つの要素は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。