@wy 2018-01-09T22:45:26.000000Z 字数 4599 阅读 664

Vue周末班第一天

Vue周末班

Vue介绍

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架

接下里分别解读一下框架和库以及渐进式的理解

框架和库

Library

库，本质上是一些函数的集合。每次调用函数，实现一个特定的功能，接着把控制权交给使用者

代表：jQuery、underscore、lodash

Framework

框架，是一套完整的解决方案，使用框架的时候，需要把你的代码放到框架合适的地方，框架会在合适的时机调用你的代码

框架规定了自己的编程方式，是一套完整的解决方案
使用框架的时候，由框架控制一切，我们只需要按照规则写代码

库个框架的主要区别

开发者主动调用库的代码，框架主动调用开发者的代码
核心点：谁起到主导作用（控制反转）
- 框架中控制整个流程的是框架
- 使用库，由开发人员决定如何调用库中提供的方法（辅助）
- 框架的侵入性很高（从头到尾）

参考我们所说的前端框架与库的区别？

渐进式理解

渐进式对应的英文为“Progressive”，意思是渐进的，一步一步，在一开始并不需要把所有的东西全都用上，而是根据项目的深入，逐步的用上合适的工具。

看下面作者给的图：

渐进式理解

声明式的渲染（Declarative Rendering），DOM状态只是数据状态的一个映射，所有的逻辑尽可能在状态的层面去进行，当状态改变了，view会被框架自动更新到合理的状态

组件系统（Component System）将一个大型的界面切分成一个一个更小的可控单元

客户端路由（Client-Side Routing）：当做单页应用时，需要管理路径和视图的映射关系，就需要路由解决方案

大规模的状态管理（Vuex），多个组件之间的共享、多个组件需要去改动同一份状态，需要集中式的管理应用的状体

构建工具（vue-cli），解决工程结构化，模块化，最终打包压缩部署测试的一系列流程的工具

参考文稿Vue作者尤雨溪：Vue 2.0，渐进式前端解决方案

Vue的两个核心点

响应式的数据绑定
当数据发生改变 -> 视图自动更新
可组合的视图组件
把视图按照功能，切分若干基本单元
组件可以一级一级组合成整个应用，形成了倒置的组件树
使用组件的好处：可维护、可重用、可测试
组件化应用构建

温馨提示：学习Vue要转换思路，忘记操作DOM这回事，而是专注于操作数据

那么接下来通过实例围绕着响应式的数据绑定来说一下第一个核心点。

Vue初体验---启动应用

// 引入vue.js文件
<script src="./src/vue.js"></script>
<body>
    <!--Vue使用了基于HTML的模板语法，需要指定Vue管理的html模板范围，数据只能在此范围内解析-->
    <div id="app">
        <p>{{msg}}</p>
    </div>
    <script>
        // 要展示的数据
        let message = 'hello';
        // 根实例 启动应用
        // 传入一个对象作为参数，称之为选项对象，告诉vue做什么事情
        let vm = new Vue({
                el: '#app', // 需提供一个css选择器或者一个页面中已存在的DOM元素
                // Vue实例的数据对象，用于提供给View提供数据
                data:{
                    msg:message
                }
            })
    </script>
</body>

Vue实例

用于启动整个应用
需要传入一个选项对象，告诉Vue要做的事情

选项对象

el(element)
- 类型：string | HTMLElement 一个css选择器或者一个页面中已存在的DOM元素
- 作用：提供给Vue要作用的模板的挂载点
- 限制：只能在new Vue整个根实例中使用
- 挂载之后可以通过vm.$el访问这个元素
data
- Vue 实例的数据对象，把要在view中使用的数据定义在数据对象上
- 数据对象中的属性都会挂载在实例上，所以可以通过vm.msg访问或者vm.$data.msg访问
- 数据对象上的数据都是响应的，当值变化时，就会重新渲染页面
- 注意：先要在选项对象上定义，才能再模板中使用，否则会报错

可通过定时器来体验响应的数据绑定

以上代码省略....
setTimeout(function(){
    vm.msg = '过了两秒，我改变了'
},2000)

或者打开浏览器的调试工具，在控制台输入

vm.msg = '改变我吧'

模板语法---数据绑定

文本插值，“Mustache”语法，也就是双大括号 {{}}
双大括号内值为表达式，而不能解析js语句
- 表达式是求值的代码，会产生一个值，比如变量、常量、属性、函数调用、运算结果等
- 语句是一段可执行代码，可理解为一个行为，比如，if、for、while、switch
- 语句中可以使用表达式，但表达式中不能使用语句
作用：从数据对象data中获取值
说明：数据对象的属性值发生了改变，插值处的内容都会更新

注意：Mustache 语法不能作用在 HTML 元素的属性上

<div id="app">
    <p>{{msg}}</p>
    {{ 1+1 }}
    {{ true ? 1 : 2 }}
    {{ [1,2,3].map(item => item*3) }}
</div>
<!-- ！！！错误示范！！！ -->
<h1 title="{{ err }}"></h1>

响应式的实现原理

在以上例子中，定义的数据对象只是一个普通的对象，而修改它们时，视图会自动进行更新。
那么请带着一个疑问继续读下去：在改变属性的情况下，为什么能够让视图自动更新？
这就要说到Vue内部响应式的实现原理。

数据劫持

当在Vue实例的数据对象定义好数据后，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter，这一过程称之为数据劫持。并结合发布者-订阅者模式的方式,在数据变动时发布消息给订阅者，触发相应的监听回调。

核心方法：Object.defineProperty()
- getter/setter 访问器
- 作用：读取或设置对象属性值的时候，执行定义的get/get方法

基本用法：

// 普通的对象
var data = {value: 'hello'}
// 将value属性转为getter/setter访问器
Object.defineProperty(data,'value', {
    // 获取值触发的函数
    get () {return '这里填写属性对应的值'},
    // 设置值触发的函数
    set (newValue) {
        // newValue 为设置的新值
        console.log(newValue,oldValue);
    }
})
data.value = 123; // 设置值
console.log(data.value); // 获取值

详情请移步

双向数据绑定（two way data binding）

双向数据绑定：将DOM与Vue实例的data数据绑定到一起，彼此之间相互影响
- 数据一旦发生变化，视图会自动更新，这是数据 ---> 视图的过程
- 在DOM中产生交互，可更新数据，这是DOM ---> 数据的过程

利用数据劫持转成getter/getter实现双向数据绑定----简易版

<input type="text" id="test" />
<div id="app"></div>
<script>
    let test = document.querySelector('#test');
    let app = document.querySelector('#app');
    // 普通数据
    var data = {
        message: 'hello'
    }
    observe(data)
    // 劫持数据的方法
    function observe(data){
        Object.keys(data).forEach((key) => {
            defineReactive(data,key,data[key])
        })
    }
    // 转成getter和setter的形式
    function defineReactive(data,key,val){
        Object.defineProperty(data,key, {
            get () {
                return val
            },
            set (newValue) {
                val = newValue;
                // 设置值时自动更新视图
                app.innerHTML = val;
            }
        })
    }
    // 将数据绑定到视图
    app.innerHTML = data.message;
    test.value = data.message;
    // 给交互的元素绑定input事件，改变数据
    test.addEventListener('input',function (){
        // 改变数据后会自动更新视图
        data.message = this.value;
        // 不需要手动更新啦
        /*
            app.innerHTML = data.message;
            test.value = data.message;
        */
    })
</script>

剖析Vue原理&实现双向绑定MVVM

MVVM介绍

MVVM（Model–view–viewmodel）是一种软件架构模式，更好的UI模式解决方案。
主要有三个部分组成：
- M: Model 数据模型
- V：View 视图（对于前端来说，就是页面）
- VM：ViewModel 视图模型

MVVM通过数据双向绑定让数据自动地双向同步,数据到视图的更新，和视图改变更新数据，它的核心是数据，不推荐开发人员手动操作DOM，将精力主要放在操作数据上。Vue也借鉴了这种模式。

可以通过一张图感受一下：

双向数据绑定示意图

那么在上面的例子中，分解来说：
- html模板就是view模型
- data数据对象就是计划好的数据模型model
- new Vue()就是view-model模型

Vue中响应的数据变化注意事项

通过上面对响应的数据原理分析，我们知道Vue内部会将普通对象劫持，依次会把属性转为 getter/setter访问器，从而达到响应的目的。

那么这里有一个细节要注意，Vue劫持的是在数据对象中已经计划好的数据，也就是一开始就定义在数据对象中的属性，如果在初始化实例时一些属性没有定义，而在未来才将属性添加到对象，由于 JavaScript 的限制，Vue不能检测到对象属性的添加或删除，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。

var vm = new Vue({
  data: {
    a: 1
  }
})
// `vm.a` 现在是响应式的
vm.b = 2
// `vm.b` 不是响应式的

注意：以上代码只能辅助理解那些是响应的属性，那些不是响应的属性，而不能将
b这个属性渲染在页面中，否则会报错。

<!--未在数据对象中声明的数据，直接在这里使用会报错-->
<p>{{b}}</p>

但是，我们可以定义一个对象，在模板中获取对象的属性。这样来测试

<div id="app">
    {{msg}}
    {{list.ok}}
    <!--在实例初始化时，bad属性并未定义，所以页面无任何输出-->
    {{list.bad}}
</div>
<script>
    var vm = new Vue({
        el: '#app', 
        data: { 
            msg: 'hello',
            list: {
                ok: 'ok reactive'
            }
        }
    })
    // 给list添加属性不是响应的，所以页面依然不能显示bad数据
    vm.list.bad = '我是新添加的'
</script>

以上的msg、list对象、ok属性都是计划好的，所以会被劫持转成getter和stter，而bad属性是之后才添加的，所以不能响应在页面中。

Vue周末班第一天

Vue介绍

框架和库

Library

Framework

库个框架的主要区别

渐进式理解

Vue的两个核心点

Vue初体验---启动应用

Vue实例

选项对象

模板语法---数据绑定

响应式的实现原理

数据劫持

双向数据绑定（two way data binding）

利用数据劫持转成getter/getter实现双向数据绑定----简易版

MVVM介绍

Vue中响应的数据变化注意事项

内容目录