Vue2.0 和Vue3.0 知识点总结

1: Vue 的基本原理:
   
   当一个Vue实例被创建时, Vue会遍历data 中的属性, 用Object.defineProperty (vue3.0)
   中使用 (proxy);  将他们转化为getter, setter, 并且在内部追踪相关依赖, 在属性被访问和修改时通知变化, 每一个组件实力都用相应的watcher程序实例, 它会在组件渲染过程中把属性记录为, 之后当依赖项的setter 被调用时, 会通知watcher 重新计算, 从而使关联的组件使得更新。

2: 双向数据绑定原理:

   Vue.js 是采用数据劫持结合发布者-订阅者模式的方式, 通过Object.defineProperty() 来劫持各个属性的setter 和getter 方法, 在数据变动的时候, 发布消息给订阅者, 触发相应的监听回调。 主要分为一下几步:

 2.1:  需要observe 的数据对象进行递归遍历, 包含子属性对象的属性, 都加上setter和getter 这样的话, 
       给在各个对象某个值赋值, 就会触发setter, 那么就能监听到数据变化。

 2.2:  compile 解析模板指令, 将模板中的变量替换成数据, 然后初始化渲染页面视图, 并将每一指令对应的 
 节点绑定到更新函数, 添加监听数据的订阅者, 一旦数据发生变动, 就会收到通知, 更新视图。

 2.3: Watcher 订阅者是Observer 和Compile 之间通信的桥梁, 主要做的事情就是: (1): 在自身实例时往属性订阅器(dep) 里边添加自己, (2): 自身必须有一个update()方法, 待属性变动时 dep.notice() 等通知时,
能够调用自身的update() 方法,  并且触发Compile 中绑定的回调, 则攻成身退。

 2.4: MVVM 作为数据绑定的入口, 整合Observer, Compile 和Watch 三者, 通过Observer 来监听自己的model 数据变化, 通过Compile 来解析模板编译指令, 最终利用Watch 打起来Observer 和Compile 通信桥梁, 达到数据变化--> 试图更新;  视图更新;  视图交互变化 (input) --> 数据model 变更的双向绑定的效果。

3: 使用Object.defineProperty() 来进行数据劫持有什么特点?
   在对于一些属性进行操作时,  使用这种方法无法拦截, 比如通过修改下标的方式修改数据或者给对象新增属性, 这都不能触发组件重新渲染, 因为Object.defineProperty 不能拦截到这些操作。 更精准的来说, 对于数组而言, 大部分操作都是拦截不到的, 只是Vue 内部通过重写函数的方式解决这个问题。
 
   在vue3.0 中已经不使用这种方式了, 而且通过使用Proxy 对对象进行代理, 从而实现数据劫持。 使用Proxy 的好处是它可以完美的监听到任何方式的数据改变, 唯一的缺点是兼容性问题, 因为Proxy 是ES6 的语法。

4: MVVM 和 MVC 和 MVP 的区别:
   MVVM  MVC MVP 是三种软件架构设计模式, 主要通过分离关注点的方式来组织代码结构, 优化开发效率。
   在开发单页面应用时, 往往一个路由页面对应一个脚本文件。 所有的页面逻辑都在一个脚本文件里。 页面的渲染, 数据获取, 对用户事件的响应所有的应用逻辑都混合在一起, 这样在简单开发项目时, 可能看不出什么问题, 如果项目变得复杂, 那么整个文件就会变冗长, 混乱, 这样对项目开发和后期维护是非常不利的。

5:  <div id="#root"> 
      
    </div>

   创建vue 实例对象, vue 是一个构造函数,new 出来一个vue 对象, 除了第一种方法使用el: "#root"
   第二种方法: 就是使用vm 进行接受, const vm = new vue({});
   console.log(vm);  vm 就是vue 的实例对象, vm.$mount("root");  也可以实现DOM 挂载。

6: vue 中的数据劫持, object.defineProperty() 方法
   vue 中是通过数据劫持来做数据绑定的, 其中最核心的方法就是通过Object.defineProperty() 方法来实现数据劫持的, 来达到监听数据变化的目的, 无疑这个方法是最重要的, 最基础的内容之一。

 
7: Object.defineProperty(); 方法会直接在一个对象上定义新属性, 或者修改一个对象现有的属性, 并且返回这个属性。
  
8: 语法:
   object.defineProperty(obj, prop, descriptor);  跟着三个属性
   第一个参数需要修改对象,  第二个参数是要修改对象的属性, 第三个参数是配置项

   参数一: 要在其定义的属性对象上
   参数二: prop: 定义要修改的属性名称
   参数三: descriptor: 被定义或者属性描述

   描述
   该方法允许精确添加或者修改对象的属性。 通过赋值操作添加的普通属性是可以枚举(遍历), 能够在属性枚举期间呈现出来(for...in... 或者使用Object.keys())  方法, 这些属性的值是可以被改变的, 也是可以被删除的,  在各个方法的允许修改默认选项(或者配置),  默认情况, 使用Object.defineProperty()
添加的属性是不修改的。

9: 
对象里目前存在的属性描述符有两种主要形式：数据描述符和存取描述符。数据描述符是一个具有值的属性，该值可能是可写的，也可能不是可写的。存取描述符是由getter-setter函数对描述的属性。描述符必须是这两种形式之一；不能同时是两者。

数据描述符和存取描述符均具有以下可选键值(默认值是在使用Object.defineProperty()定义属性的情况下)：

configurable

当且仅当该属性的 configurable 为 true 时，该属性描述符才能够被改变，同时该属性也能从对应的对象上被删除。默认为 false。

enumerable

当且仅当该属性的enumerable为true时，该属性才能够出现在对象的枚举属性中。默认为 false。

数据描述符同时具有以下可选键值：

value

该属性对应的值。可以是任何有效的 JavaScript 值（数值，对象，函数等）。默认为 undefined。

writable

当且仅当该属性的writable为true时，value才能被赋值运算符改变。默认为 false。

存取描述符: 具有以下可选键值:
 get  一个属性提供getter 方法, 如果没有getter 则为underfined。当访问该属性时, 方法会被执行, 方法执行时没有参数传入, 但是会传入this 对象。 (由于继承关系, 这里的this, 并不是一定该属性。)
默认为  underfined。

set() 方法
一个给属性提供setter 的方法, 如果没有setter 则为underfined。 当属性修改时, 触发执行该方法。 该方法将接受唯一的参数. 即该属性心得参数值。

默认为 undefined
  
Object.keys() 的用法:  作用遍历对象
返回结果每一项key的数组:

例子1:
 // 1: 定义一个对象:
 var obj = {0: '熊大', 1: '熊二', 2: '光头强' };
 // 2: 使用object.keys() 方法
 var keyValue = object.keys(obj);
 // 3: 打印结果
 console.log(keyValue);    // 得到的是['0', '1', '2'];  // 得到的是一个数组

 例子2:
  
 var obj2 = {'name': 'a', 'list': {'a': 'value1', 'b': 'value2'}, 'num: 13'};
 也可以结合 forEach() 来使用
 Object.keys(要遍历的对象).forEach(function(key)) {
    comsole.log(key, obj2[key]);
 }