基本使用

vue2 的响应式原理

  • Object.defineProperty
const data = {};
const name = 'zhooson'

Object.defineProperty(data, 'name' {
  get: function(){
    return name
  },
  set: function(val){
    name = val
  }
})

// 测试
console.info(3, data.name)
data.name = "zhangsan"

缺点： 无法监听 新增属性/删除属性（vue.set/vue.delete)

vue 的生命周期

  • beforeCreate

    1. 创建一个空白 vue 实例，
    2. data method 尚未初始化， 不可使用

  • created

  1. vue 实例初始化完成，完成响应式绑定
  2. data method 初始化完成， 可调用
  3. 尚未开始渲染模版
  • beforeMount
  1. 编辑模版，调用 render 生成 vdom
  2. 还没有开始渲染 dom
  • mounted
  1. 完成 dom 渲染
  2. 组件创建完成
  3. 开始由“创建阶段”进入“运行阶段”
  • beforeUpdate
  1. data 发生变化
  2. 准备更新 dom（尚未更新）
  • updated
  1. data 发生变化， dom 更新为完成
  • beformUnMount
  1. 组件即将进入销毁阶段（还未销毁）
  2. 移除绑定自定义事件，全局事件
  • unMounted
  1. 组件销毁完成

vue 是么时候操作 dom 最合适？

  1. mounted 和 updated 都不能保证子组件全部挂载完
  2. $nextTick 保证

Ajax 应该在哪个生命周期？

  • mounted / created

vue2/vue3/react diff 算法有何区别？

  • vue2 双端比较

  • vue3 最长递增序列比较

  • react 仅右移

vue 中 如何监听组件报错？

  1. errorCaputred 组件生命周期
  2. window.error

组件的通讯

  1. props emit
  2. eventbus
  3. vuex
  4. event 自定义事件（重新初始化 new vue()）

自定义的 v-model

<template>
  <input type="text" :value="text" @change="$emit('change', $event.target.value )"/>
</template>
<script>
  export default {
    model: {
      prop: 'text', // 对应 props text
      event: 'change'
    },
    props : {
      text: String,
      default: () => {
        return ''
      }
    }
  }
</script>
  • 自定义的 组件
{
  {
    name;
  }
}
<CustomModel v-model="name" />;

$nextTick

1. vue是异步渲染
2. data改变之后，dom不会立即渲染
3. $nextTick在dom渲染后触发， 已获取最新的dom节点

代码验证： todolist 后的 添加 push 的数据，然后的直接获取 dom 的节点， dom 节点还是未获取

slot 插槽

<slot name="zhooson"></slot>

动态 组件

<component :is="[componentname]" ></component>

异步组件

export default {
  components: {
     form: () => import('./form.vue');
  }
}

缓存组件

keep-alive

vue3 比 vue2 的 diff 带来哪些变化

  • vue2 updateChildren 双端比较
  • vue3 updateChildren 增加了“最长递增子序列”（更快）
  • vue3 还增加了 patchFlag，静态提升，函数缓存等
Last Updated:
Contributors: zhanghusheng