Vue双向数据绑定之原理及实现2


一、数据代理

我们封装的代码中,进行数据访问是myVue.data.name,而实际Vue中的如果要获取数据肯定不需要添加data选项即 myVue.namemyVue.skill
此时就可以通过代理,将data数据选项绑定在Vue对象中,修改时同步到data。

function Vue(options){    
    this.el = options.el        // 元素
    this.data = options.data     // 数据
    this.watcher = {}    // 属性、数据、元素 的关联
    
    var self = this 
    Object.keys(this.data).forEach(function(key){    // 遍历所有key
        self.proxyKeys(key); // 添加代理(data项的处理)
        self.defineProperty(self.data, key, self.data[key])    
    })
    
    // 解析DOM
    this.compile()    
}

Vue.prototype = {
    proxyKeys(key){
        var self = this 
        Object.defineProperty(this, key, {
            enumerable: false,
            configurable: true,
            get(){
                return self.data[key]
            },
            set(newVal){
                self.data[key] = newVal
            }
        })
    },
      
    // defineProperty、compile保持不变
    // ...
}


Vue双向数据绑定之原理及实现1


还是否记得第一次使用Vue时的感觉?双向数据绑定,竟然那么神奇,可以让代码变的如此简单。

一、Vue核心思想

在了解Vue的双向绑定之前,你先要回忆一下Vue的核心思想。还记得getter/setter方法、还记得Watcher?
Vue核心思想

关于getter/setter方法

1.当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项 (图中就是 a 对象中的 b 属性,即 a.b),Vue 将遍历此对象所有的属性,并使用 Object.defineProperty 把这些属性全部转为 getter/setter 方法。
2. 用户看不到 getter/setter 方法,但是在内部它们让 Vue 追踪依赖,在属性被访问和修改时通知变化。
3. 同时 Vue 会对模板进行编译,解析之后会生成指令对象,也例如 v-text, v-hide 等。当指令中 v-text='a.b'时,其实就是触发 getter 方法,获取对应的数据。

另外每个属性都对应有一个 Watcher,它有什么作用?

1.当 data 选项中 a.b 值发生改变时,就会触发 setter 方法,会通知到对应的 watcher。
2. 之后再通知指令去调用 update 方法,由于指令是 DOM 的封装,所在在 update 时其实就是调用了原生 javascript 的 DOM 方法来更新界面。


Vue基础3-组件传参


一、组件

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。组件其实就是一个拥有样式、动画、js逻辑、HTML结构的综合块。

  • 如何划分组件

    - 功能模块: select、pagenation...
    - 页面区域划分: header、footer、sidebar...
  • data必须是函数
    通过 Vue 构造器传入的各种选项大多数都可以在组件里用。data 是一个例外,它必须是函数。


Vue基础2-模板语法和组件


一、模版指令

通过模版指令(写在html中的),即是html和vue对象的粘合剂。

  • 数据渲染 v-text、v-html、{{}}

      <div id="app">
        {{ message }}
      </div>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    })

    v-text更新元素的 textContentv-html更新元素的 innerHTML,内容按普通 HTML 插入,不会作为 Vue 模板进行编译。如果想要title: 'TOMVC <sub>2.0</sub>'不以字符串形式显示,就可以使用v-html, <h2 v-html='title'></h2>


Vue基础1-基本认知


一、Vue官网

Vue中文网

二、Vue简介

Vue是一个前端的双向绑定类的框架,新的Vue版本参考了React的部分设计,当然也有自己独特的地方,比如Vue的单文件组件开发方式都很有创新,另外Vue自身的一些绑定的语法、用法等都非常精炼,很容易上手,而且第三方的插件都非常丰富,社区非常活跃,最新的文档都有中文版本。而且Vue配合官方的和第三方的库可以实现单文件的组件化开发、SPA等现代化前端开发。

- 是一个轻量级MVVM框架(大小只有18KB)
- 数据驱动+组件化的前端开发
- 社区完善