例子

var vm = new Vue({
    el: '#app', // 指定Vue接关元素
    data: {
        // 界面数据
        // 使用{{key}}语法来显示数据，数据响应式
        title: '购物车', 
    },
})

数据响应式

简单：数据变化引起界面变化
深入：（看下面的手撕源码部分）数据变化时，能够自动运行相关函数，改变页面的数据展示

Vue语法

• {{key}}

• v-for

• 动态属性
  可以与普通属性同时存在

:class="{
    active: item.number>0
}"

• @click
  使用函数或js表达式

• 计算属性 computed
  根据其他属性值计算出来的

手撕Vue

依赖收集

收集哪些函数用到了对象的属性，在 get() 中进行
建立一个数组？Set？记录
只记录一次，所以要用Set

如何知道调用该函数的父函数？
每次调用函数前，需要将运行的函数存储到全局变量中，如 window.__func

派发更新

对象属性更新后运行依赖该属性的函数，在 set() 中进行
循环依赖Set并执行

Vue优化手段

• v-for 使用 key

• 使用冻结对象
  冻结对象不会被响应化，

// 冻结对象
Object.freeze(obj);
// 查询对象是否被冻结
Object.isFrozen(obj);

• 使用函数式组件
  优化内存暂用
  组件里面没有data属性，纯渲染，不需要进行实例化

export default{
    functional: ture,
    ...
}

• 非时实绑定的表单项
  change和input区别链接
  使用 v-model 绑定表单时，监听 @input ，每一次变动都会导致数据的变动 -> 页面重新渲染，占用js主线程时间
  可以使用 v-model.lazy 平替，监听 @change

• v-show 和 v-if
  对于一些频繁切换状态的dom的元素使用 v-show 可以保证虚拟dom的稳定，避免新增和删除元素

• 保持对象引用稳定
  对于原始数据类型，保持其值不变即可
  对于对象类型，保持其引用不变即可
  从另一方面来说，由于可以通过保持属性引用稳定来避免子组件的重渲染，那么我们应该细分组件来尽量避免多余的渲染