vue高阶问题汇总

自定义v-model

nextTick
this.$nextTick(()=>{

})
渲染dom后调用，多次修改dom，也只执行一次
有点像react的setState的第二个参数，回调函数。

slot
作用域插槽

动态异步组件
动态组件，一个组件可以赋值给多个类型的元素。动态获取数据，如for循环多个组件，
活着点击加载不同的组件内容

keep-alive
包裹组件

mixin
多组件相同state数据的管理
mixin.js
export default {
data() {
return {
city: ‘北京’
}
},
methods: {
showName() {
// eslint-disable-next-line
console.log(this.name)
}
},
mounted() {
// eslint-disable-next-line
console.log(‘mixin mounted’, this.name)
}
}
然后在需要用的组件中导入import这个文件,再注册一下：
export default {
mixins: [myMixin]
…
}

vuex
state,getters,mutation,action
原理:组件通过action把数据传给mutation，更新state，最好再更新v-dom

vueRouter
懒加载，只有点击了才加载路由的组件
routes:[{
path:’/’,
component:()=> import(’…/component/***.vue’)
},
{
path:’/’,
component:()=> import(’…/component/***.vue’)
}
]

computed
computed: {
updateMessage: function () {
console.log(this.city)
return this.city + this.name
}
}
Props，methods,data和computed的初始化都是在beforeCreated和created之间完成的。

Object.definedProperty()
0、深度监听，需要递归，一次性计算量大。
1、无法监听es6的Set、WeakSet、Map、WeakMap的变化；
2、无法监听Class类型的数据；
3、属性的新加或者删除也无法监听；
4、数组元素的增加和删除也无法监听。
vue3将被proxy代替

prototype 显式原型链
proto 隐式原型链

prototype下面有自定义的属性方法和constructor和__proto__
__proto__下面有自定义的属性方法和系统的方法属性，constructor

arr = new Array()
arr.__proto__是array
arr.prototype是空
new Object同上

fun = function(){}
fun.prototype是constructor +proto（object）
fun.__proto__是ƒ () { [native code] }

KaTeX parse error: Expected '}', got 'EOF' at end of input: … // 通过once来监听定时器，在beforeDestroy钩子可以被清除。
this.$once(‘hook:beforeDestroy’, () => {
clearInterval(timer);
})
}