Vue简单实现原理详解

对

Obj

对象中的

name

属性进行了挟持，一旦该属性发生了变化则会触发

set

函数执行，做出响应的操作。

扯了这么多，具体说一下

Vue

实现的原理。

需要数据监听器

Observer

，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者。
需要指令解析器

Compile

，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数。
一个

Watcher

，作为连接

Observer

和

Compile

的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图。

MVVM

入口函数，整合以上三者，实现数据响应。

接下来的文章将沿着这个思路一步一步向下进行，以便完成一个简单的

Vue

类，完成数据与视图的实时更新。

<div id="app">
  <p>{{name}}</p>
  <p q-text="name"></p>
  <p>{{age}}</p>
  <p>{{doubleAge}}</p>
  <input type="text" q-model="name"/>
  <button @click="changeName">点击</button>
  <div q-html="html"></div>
</div>
<script>
new QVue({
  el:"#app",
  data:{
    name:"I am test",
    age:12,
    html:"<button>这是一个后插入的按钮</button>"
  },
  created(){
    console.log("开始吧,QVue");
    setTimeout(() => {
      this.name = "测试数据，更改了么";
    },2000)
  },
  methods:{
    changeName(){
      this.name = "点击啦，改变吧";
      this.age = 1000000;
    }
  }
})
</script>

以上代码则是需要完成的功能，保证所有功能全部都能实现。

首先我们要考虑的是，要创建一个

Vue

的类，该类接收的是一个

options

的对象，也就是我们在实例化

Vue

的时候需要传递的参数。

class QVue {
  constructor(options){
    // 缓存options对象数据
    this.$options = options;
    // 取出data数据，做数据响应
    this.$data = options.data || {};								 
 2/6   首页 上一页 1 2 3 4 5 6 下一页 尾页