一文回顾Vue2 | 看看我们都学了什么

Vue

指令

v-if v-else v-else-if v-show v-model v-text v-html v-cloak v-for v-on v-bind v-slot v-pre v-once

v-if和v-show是否可以连用

在vue2中v-show的优先级高于v-if，所以会在每一个节点上都出现v-if，造成性能上的浪费，不建议连用。

v-text和v-html的区别

v-text无法解析html

v-show和v-if的区别

v-show和v-if的本质区别在于是否渲染了该节点，v-show是通过css的display来控制是否显示，而v-if直接不生成该节点。

v-model是如何实现双向绑定的

v-model可以拆解成props: value和 events: input(input为例子)

<base-input v-model="checkFlag">
等价于
<back-input v-bind="value" @input="(value)=>this.value=value">
指定
model: {
  prop: 'number',
  event: 'change'
},

生命周期

beforeCreate

new Vue()触发后的第一个钩子，当前阶段上计算属性，data等都不能访问

created

数据侦听、计算属性、方法、事件/侦听器的回调函数已被配置完毕，更改数据不会触发updated，如果想在当前生命周期中操作dom，可以通过vm.$nextTick

beforeMount

发生在挂载之前，虚拟dom已经创建完成，可以更改数据，即将开始渲染

mounted

真实dom挂载完毕，数据完成双向绑定，可以访问到dom节点

beforeUpdate

在数据发生改变后，DOM 被更新之前被调用。这里适合在现有 DOM 将要被更新之前访问它，比如移除手动添加的事件监听器。

updated

发生在更新完成之后，当前阶段组件Dom已完成更新。要注意的是避免在此期间更改数据，因为这可能会导致无限循环的更新。

beforeDestroy

在当前周期可以清除定时器，移除事件监听。

destroyed

发生在实例销毁之后，这个时候只剩下了dom空壳。组件已被拆解，数据绑定被卸除，监听被移出，子实例也统统被销毁。

监听第三方组件内部的生命周期

Hook Event 是 Vue的自定义事件结合生命周期钩子函数实现的一种从组件外部为组件注入额外的生命周期方法

// 使用
<base-select @hook:created="createdFunc">

生命周期执行顺序

组件调用顺序先父组件后子组件，渲染完成顺序先子组件后父组件，组件的销毁顺序先父组件后子组件，销毁完成顺序先子组件后父组件。

父组件beforeCreate->父组件created->父组件beforeMount->子组件brforeCreate->子组件created->子组件beforeMount->子组件mounted->父组件mounted

数据

data为什么是一个函数

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

定义响应式数据

在data中定义的数据都是响应式的，如果未在data中定义就需要使用vm.$set

删除属性

vm.$delete(obj,key)

Cannot read properties of undefined

相信大家应该都遇到过这个报错提示，当使用a.b.c(a.b未定义)就会看到这个使用链式操作符解决

let a = {}
console.log(a.b.c) //Cannot read properties of undefined
console.log(a?.b?.c) // undefined

使用方法

1. npm install --save-dev @babel/plugin-proposal-optional-chaining
2. 在babel.config.js中添加plugins: ["@babel/plugin-proposal-optional-chaining"]
3. 重启项目

props

父子组件传值常用

props:{
	count:['Number','String'],
	list:{
		type:Array,
        default:()=>[]	
    },
    deviceItem:{
        type:Object,
        default:()=>{}
    }
}

能否在子组件内修改props的值

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。

当props传递的是基本类型时，在子组件中修改值会导致报错，而传递的时引用类型时，修改传递的值不会报错。

watch

监听数据的变化,可以在里面执行异步操作,监听对象内部属性时使用deep或者’obj.xx’

  watch: {
    list(newValue) {
      console.log(newValue);
    },
    deviceItem: {
      handler(newValue,oldVal) {
        console.log(newValue)
	this.getList()
      },
      immediate: true,
      deep: true,
    },
    'deviceItem.name'(newVal){
    }
  },

computed

computed:{
    price(){
      return this.count * 10
    }
},

watch和computed的区别

watch用来监听数据，并且执行异步操作的，数据变化会执行回调。computed本质是一个具有缓存的watcher，结果会被缓存，除非依赖的响应式 property 变化才会重新计算。

mixin

在不同的组件中可能存在部分代码是一样的，这时候可以通过将相同的东西抽离，使用mixin混入

// mixin.js 
export const mixin = {
    data(){
        return {
            lists:[]
        }
    },
    methods:{
        fetchData(){

        }
    },
    created(){
        console.log("-----")
    }
}

// 组件
import {mixin} from './mixin'
mixins:[mixin]

实例property

$parent 父组件实例

获得

子组件调用父组件的方法

// 通过$emit触发事件，父组件监听
// 父组件
<base-select @change="changeValue"/>
//子组件
this.$emits('change',data)


//子组件内直接使用$parents
this.$parents.changeValue()

$children

不保证子组件顺序

$refs

一个对象，持有注册过