vue常用知识点总结

mvvm双向数据绑定原理
vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
具体步骤：

需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter
这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化
compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图
Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是:
1、在自身实例化时往属性订阅器(dep)里面添加自己
2、自身必须有一个update()方法
3、待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。
MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果。

vue不能新增不存在的属性，不存在的属性没有getter和setter

vue的Virtual DOM

Virtual DOM这个概念产生前提示浏览器dom是很昂贵的，浏览器标准把dom设计的很复杂，我们频繁的更新dom，会产生一定的性能问题，Virtual dom就是用原生的JS对象描述DOM

无论我们写.vue文件还是写了template属性，最终都会转化为render方法，调用原型上的$mount进行挂载
render函数用来创建VNode, render函数接受一个createElement方法作为第一个参数用来创建vnode

DOM DIFF
对比算法

当对比两棵树时，React首先比较两个根节点。根节点的type不同，其行为也不同。每当根元素有不同类型，React将卸载旧树并重新构建新树。从到或从
到，或从到
，任何的调整都会导致全部重建。当树被卸载，旧的DOM节点将被销毁。组件实例会产生
当比较两个相同类型的React DOM元素时，React则会观察二者的属性，保持相同的底层DOM节点，并仅更新变化的属性。
React支持了一个key属性。当子节点有key时，React使用key来匹配原本树的子节点和新树的子节点。

请详细说下你对vue生命周期的理解？
创建前/后：在beforeCreated阶段，vue实例的挂载元素 $el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，$ el还没有。

载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。

更新前/后：当data变化时，会触发beforeUpdate和updated方法。

销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在

DOM 渲染在哪个周期中就已经完成？
DOM 渲染在 mounted 中就已经完成了

v-if和v-show区别
v-if是动态的向DOM树内添加或者删除DOM元素；
v-show是通过设置DOM元素的display样式属性控制显隐；
复制代码
减小首屏代码体积，我们用异步组件
组件上监听原生事件native
a: {name: {age: 123}} 改变age能触发视图更新是Object.defineProperty实现setter和getter
用key 管理可复用的元素

Username

Email

不加key替换时只会换placeholder

监听浏览器关闭事件

// 关闭页面提醒
export default {
created () {
// 监听浏览器关闭事件
window.onbeforeunload = function (e) {
var dialogText = ‘离开网站将不保存您所做的更改’
e.returnValue = dialogText
return dialogText
}
},
destroyed () {
// 解除监听浏览器关闭事件
window.onbeforeunload = null
}
}
class和style绑定

class绑定一个对象

data: {
isActive: true,
hasError: false
}

绑定一个数组，数组中可以加三木运算和对象
3.

style绑定

data: { styleObject: { color: 'red', fontSize: '13px' } }

数组语法可以将多个样式对象应用到同一个元素上：

watch高级用法

FullName: {{fullName}}

FirstName:

new Vue({
el: ‘#root’,
data: {
firstName: ‘Dawei’,
lastName: ‘Lou’,
fullName: ‘’
},
watch: {
firstName(newName, oldName) {
this.fullName = newName + ’ ’ + this.lastName;
}
}

//
watch: {
firstName: {
handler(newName, oldName) {
this.fullName = newName + ’ ’ + this.lastName;
},
// 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
immediate: true
}
})

// watch还有deep
watch: {
obj: { // js的内存地址不变
handler(newName, oldName) {
console.log(‘obj.a changed’);
},
immediate: true,
deep: true // 深度监听
}
}
deep的意思就是深入观察，监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器，但是这样性能开销就会非常大了，任何修改obj里面任何一个属性都会触发这个监听器里的 handler。

watch: {
‘obj.a’: {
handler(newName, oldName) {
console.log(‘obj.a changed’);
},
immediate: true
}
}
vue不能更改一下情况

数组：
当你利用索引直接设置一个项时
当你修改数组的长度时

对象：
Vue 不能检测对象属性的添加或删除：

v-model的修饰符：.lazy, .number, .trim

.sync 修饰符

过渡

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。
复制代码
插件

import Vue from ‘vue’

function log (message) {
if (process.env.NODE_ENV !== ‘production’) {
window.console.log(message)
}
}

const ConsolePlugin = {
install(vue, options) {
Vue.prototype.$console = log
}
}

export default ConsolePlugin

new Vue的过程

Vue 初始化主要就干了几件事情，合并配置，初始化生命周期，初始化事件中心，初始化渲染，初始化 data、props、computed、watcher 等等。
v-model实现

Vue项目点击浏览器返回，返回至指定的页面

beforeRouteLeave(to, from, next){
if(to.name ===‘D’ ){
next({name: ‘G’});
}else {
next(); // 注意：这边next必须要写
}
},

vue常用知识点总结

猜你喜欢