Vue基础入门详解

小鱼儿 2022-12-22 06:17 160阅读 0赞

## 【1】什么是VUE ##

官网文档：[https://cn.vuejs.org/v2/guide/instance.html][https_cn.vuejs.org_v2_guide_instance.html]

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

**通过CDN引入**

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    或者：
    
    
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

**VUE实例**

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：

var vm = new Vue({ 
      // 选项
    })

虽然没有完全遵循 MVVM 模型，但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例。

当创建一个 Vue 实例时，你可以传入一个选项对象。。

一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成。举个例子，一个 todo 应用的组件树可以是这样的：

根实例
    └─ TodoList
       ├─ TodoItem
       │  ├─ TodoButtonDelete
       │  └─ TodoButtonEdit
       └─ TodoListFooter
          ├─ TodosButtonClear
          └─ TodoListStatistics

需要明白`所有的 Vue 组件都是 Vue 实例`，并且接受相同的选项对象 (一些根实例特有的选项除外)。

--------------------

**数据与方法**

当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。

// 我们的数据对象
    var data = {  a: 1 }
    
    // 该对象被加入到一个 Vue 实例中
    var vm = new Vue({ 
      data: data
    })
    
    // 获得这个实例上的 property
    // 返回源数据中对应的字段
    vm.a == data.a // => true
    
    // 设置 property 也会影响到原始数据
    vm.a = 2
    data.a // => 2
    
    // ……反之亦然
    data.a = 3
    vm.a // => 3

当这些数据改变时，视图会进行重渲染。值得注意的是只有当实例被创建时就已经存在于 data 中的 property 才是响应式的。也就是说如果你添加一个新的 property，比如：

vm.b = 'hi'

那么对 b 的改动将不会触发任何视图的更新。如果你知道你会在晚些时候需要一个 property，但是一开始它为空或不存在，那么你仅需要设置一些初始值。比如：

data: { 
      newTodoText: '',
      visitCount: 0,
      hideCompletedTodos: false,
      todos: [],
      error: null
    }

这里唯一的例外是使用 `Object.freeze()`，这会阻止修改现有的 property，也意味着响应系统无法再追踪变化。

var obj = { 
      foo: 'bar'
    }
    
    Object.freeze(obj)
    
    new Vue({ 
      el: '#app',
      data: obj
    })
    <div id="app">
      <p>{ {  foo }}</p>
      
      <button v-on:click="foo = 'baz'">Change it</button>
    </div>

除了数据 property，Vue 实例还暴露了一些有用的实例 property 与方法。它们都有前缀 `$`，以便与用户定义的 property 区分开来。例如：

var data = {  a: 1 }
    var vm = new Vue({ 
      el: '#example',
      data: data
    })
    
    vm.$data === data // => true
    vm.$el === document.getElementById('example') // => true
    
    // $watch 是一个实例方法
    vm.$watch('a', function (newValue, oldValue) { 
      // 这个回调将在 `vm.a` 改变后调用
    })

--------------------

## 【2】VUE生命周期 ##

每个 Vue 实例在被创建时都要经过一系列的初始化过程——`例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等`。同时在这个过程中也会运行一些`叫做生命周期钩子的函数`，这给了用户在不同阶段添加自己的代码的机会。

比如 `created 钩子`可以用来在一个实例被创建之后执行代码：

new Vue({ 
      data: { 
        a: 1
      },
      created: function () { 
        // `this` 指向 vm 实例
        console.log('a is: ' + this.a)
      }
    })
    // => "a is: 1"

也有一些其它的钩子，在实例生命周期的不同阶段被调用，如 `mounted、updated 和 destroyed`。生命周期钩子的 `this 上下文指向调用它的 Vue 实例`。

不要在选项 property 或回调上使用箭头函数，比如 `created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())`。因为`箭头函数并没有 this，this 会作为变量一直向上级词法作用域查找，直至找到为止`，经常导致 `Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function` 之类的错误。

**生命周期图示**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0owODA2MjQ_size_16_color_FFFFFF_t_70_pic_center]

## 【3】数据代理 ##

**数据代理: 通过一个对象代理对另一个对象(在前一个对象内部)中属性的操作(读/写)**  
vue 数据代理就是通过vm 对象来代理data 对象中所有属性的操作。

**基本实现流程**

a. 通过Object.defineProperty()给vm 添加与data 对象的属性对应的属性描述符
    b. 所有添加的属性都包含getter/setter
    c. getter/setter 内部去操作data 中对应的属性数据

**测试代码**

<div id="test"></div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
      const vm = new Vue({ 
        el: "#test",
        data: { 
          name: '张三'
        }
      })
      console.log(vm.name)  // 读取的是data中的name,  vm代理对data的读操作
      vm.name = '李四' // 数据保存到data中的name上, vm代理对data的写操作
      console.log(vm.name, vm._data.name)
    
    
    </script>

**vue中的data**

类型：Object | Function
    
    组件的定义data只接受 function。

Vue 实例的数据对象。Vue 将会递归将 `data 的 property 转换为 getter/setter`，从而让 data 的 property 能够响应数据变化。对象必须是纯粹的对象 (含有零个或多个的 key/value 对)：浏览器 API 创建的原生对象，原型上的 property 会被忽略。大概来说`，data 应该只能是数据 - 不推荐观察拥有状态行为的对象。`

一旦观察过，你就无法在根数据对象上添加响应式 property。因此推荐在创建实例之前，就声明所有的根级响应式 property。

实例创建之后，可以通过 `vm.$data` 访问原始数据对象。Vue 实例也代理了 data 对象上所有的 property，因此访问 vm.a 等价于访问 `vm.$data.a`。

以 `_ 或 $ 开头的 property 不会被 Vue` 实例代理，因为它们可能和 Vue 内置的 property、API 方法冲突。你可以使用例如 `vm.$data._property` 的方式访问这些 property。

**当一个组件被定义，data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！通过提供 data 函数，每次创建一个新实例后，我们能够调用 data 函数，从而返回初始数据的一个全新副本数据对象**。

如果需要，可以通过将 `vm.$data 传入 JSON.parse(JSON.stringify(...))` 得到深拷贝的原始数据对象。

**示例：**

var data = {  a: 1 }
    
    // 直接创建一个实例
    var vm = new Vue({ 
      data: data
    })
    vm.a // => 1
    vm.$data === data // => true
    
    // Vue.extend() 中 data 必须是函数
    var Component = Vue.extend({ 
      data: function () { 
        return {  a: 1 }
      }
    })

注意，如果你为 data property 使用了箭头函数，则 this 不会指向这个组件的实例，不过你仍然可以将其实例作为函数的第一个参数来访问。

data: vm => ({  a: vm.myProp })

--------------------

## 【4】模板解析 ##

关于模板解析以及数据劫持等原理可以参考GitHub项目[https://github.com/DMQ/mvvm][https_github.com_DMQ_mvvm]学习。下面提到的js源码也来自于该项目。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0owODA2MjQ_size_16_color_FFFFFF_t_70_pic_center 1]  
如下是准备知识：

1.[].slice.call(lis): 将伪数组转换为真数组
    2.node.nodeType: 得到节点类型
    3.Object.defineProperty(obj, propertyName, { }): 给对象添加/修改属性(指定描述符)
    	configurable: true/false  是否可以重新define
    	enumerable: true/false 是否可以枚举(for..in / keys())
    	value: 指定初始值
    	writable: true/false value是否可以修改存取(访问)描述符
    	get: 函数, 用来得到当前属性值
    	set: 函数, 用来监视当前属性值的变化
    4.Object.keys(obj): 得到对象自身可枚举的属性名的数组
    5.DocumentFragment: 文档碎片(高效批量更新多个节点)
    6.obj.hasOwnProperty(prop): 判断prop是否是obj自身的属性

### ① 基本原理 ###

1.  将el 的所有子节点取出, 添加到一个新建的文档fragment 对象中
2.  对fragment 中的所有层次子节点递归进行编译解析处理。
    
     *  对大括号表达式文本节点进行解析
     *  对元素节点的指令属性进行解析
        
         *  事件指令解析
         *  一般指令解析
3.  将解析后的fragment 添加到el 中显示

**mvvm.js如下：**

/*
    相关于Vue的构造函数
     */
    function MVVM(options) { 
      // 将选项对象保存到vm
      this.$options = options;
      // 将data对象保存到vm和datq变量中
      var data = this._data = this.$options.data;
      //将vm保存在me变量中
      var me = this;
      // 遍历data中所有属性
      Object.keys(data).forEach(function (key) {  // 属性名: name
        // 对指定属性实现代理
        me._proxy(key);
      });
    
      // 对data进行监视
      observe(data, this);
    
      // 创建一个用来编译模板的compile对象
      this.$compile = new Compile(options.el || document.body, this)
    }
    
    MVVM.prototype = { 
      $watch: function (key, cb, options) { 
        new Watcher(this, key, cb);
      },
    
      // 对指定属性实现代理
      _proxy: function (key) { 
        // 保存vm
        var me = this;
        // 给vm添加指定属性名的属性(使用属性描述)
        Object.defineProperty(me, key, { 
          configurable: false, // 不能再重新定义
          enumerable: true, // 可以枚举
          // 当通过vm.name读取属性值时自动调用
          get: function proxyGetter() { 
            // 读取data中对应属性值返回(实现代理读操作)
            return me._data[key];
          },
          // 当通过vm.name = 'xxx'时自动调用
          set: function proxySetter(newVal) { 
            // 将最新的值保存到data中对应的属性上(实现代理写操作)
            me._data[key] = newVal;
          }
        });
      }
    };

### ② 模板解析之大括号表达式解析 ###

1.  根据正则对象得到匹配出的表达式字符串: `子匹配/RegExp.$1 name`
2.  从data 中取出表达式对应的属性值
3.  将属性值设置为文本节点的textContent

### ③ 模板解析之事件指令解析 ###

1.  从指令名中取出事件名
2.  根据指令的值(表达式)从methods 中得到对应的事件处理函数对象
3.  给当前元素节点绑定指定事件名和回调函数的dom 事件监听
4.  指令解析完后, 移除此指令属性

### ④ 模板解析之一般指令解析 ###

1.  得到指令名和指令值(表达式) `text/html/class msg/myClass`
2.  从data 中根据表达式得到对应的值
3.  根据指令名确定需要操作元素节点的什么属性
    
     *  v-text—textContent 属性
     *  v-html—innerHTML 属性
     *  v-class–className 属性
4.  将得到的表达式的值设置到对应的属性上
5.  移除元素的指令属性

**compile.js如下**

--------------------

## 【5】数据绑定与数据劫持 ##

**数据绑定**

什么是数据绑定？一旦更新了data 中的某个属性数据, 所有界面上直接使用或间接使用了此属性的节点都会更新。

**数据劫持**

数据劫持是vue 中用来实现数据绑定的一种技术。其基本思想是通过`defineProperty()`来监视data 中所有属性(任意层次)数据的变化, 一旦变化就去更新界面。

### **四个重要对象** ###

**① Observer**

a. 用来对data 所有属性数据进行劫持的构造函数  
b. 给data 中所有属性重新定义属性描述(get/set)  
c. 为data 中的每个属性创建对应的dep 对象

**② Dep(Depend)**

a. data 中的每个属性(所有层次)都对应一个dep 对象  
b. 创建的时机:

*  在初始化define data 中各个属性时创建对应的dep 对象
 *  在data 中的某个属性值被设置为新的对象时

c. 对象的结构

{ 
    	id, // 每个dep 都有一个唯一的id
    	subs //包含n 个对应watcher 的数组(subscribes 的简写)
    }

d. subs 属性说明

*  当watcher 被创建时, 内部将当前watcher 对象添加到对应的dep 对象的subs 中
 *  当此data 属性的值发生改变时, subs 中所有的watcher 都会收到更新的通知,
 *  从而最终更新对应的界面

**③ Compiler**

a. 用来解析模板页面的对象的构造函数(一个实例)  
b. 利用compile 对象解析模板页面  
c. 每解析一个表达式(非事件指令)都会创建一个对应的watcher 对象, 并建立watcher与dep 的关系  
d. complie 与watcher 关系: 一对多的关系

**④ Watcher**

a. 模板中每个非事件指令或表达式都对应一个watcher 对象  
b. 监视当前表达式数据的变化  
c. 创建的时机: 在初始化编译模板时  
d. 对象的组成

{ 
    vm, //vm 对象
    exp, //对应指令的表达式
    cb, //当表达式所对应的数据发生改变的回调函数
    value, //表达式当前的值
    depIds //表达式中各级属性所对应的dep 对象的集合对象
    //属性名为dep 的id, 属性值为dep
    }

**总结**

dep 与watcher 的关系: 多对多  
a. data 中的一个属性对应一个dep, 一个dep 中可能包含多个watcher(模板中有几个表达式使用到了同一个属性)  
b. 模板中一个非事件表达式对应一个watcher, 一个watcher 中可能包含多个dep(表达式是多层: a.b)  
c. 数据绑定使用到2 个核心技术

*  defineProperty()
 *  消息订阅与发布

### **MVVM原理图** ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0owODA2MjQ_size_16_color_FFFFFF_t_70_pic_center 2]  
**observe.js**

**watcher.js**

### 双向数据绑定 ###

双向数据绑定是建立在单向数据绑定(model==>View)的基础之上的

双向数据绑定的实现流程:

*  在解析v-model 指令时, 给当前元素添加input 监听
 *  当input 的value 发生改变时, 将最新的值赋值给当前表达式所对应的data 属性

[https_cn.vuejs.org_v2_guide_instance.html]: https://cn.vuejs.org/v2/guide/instance.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0owODA2MjQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/8b3a7f46e8a34f1e98761a943b06ece0.png
[https_github.com_DMQ_mvvm]: https://github.com/DMQ/mvvm
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0owODA2MjQ_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20201119091001296.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0owODA2MjQ=,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0owODA2MjQ_size_16_color_FFFFFF_t_70_pic_center 2]: https://img-blog.csdnimg.cn/20201119150503525.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0owODA2MjQ=,size_16,color_FFFFFF,t_70#pic_center