vue data数据修改_【前端】那些容易忘掉的前端知识 Vue梳理篇

Vue

v-show和v-if有什么区别

• v-show 通过 CSS display 控制显示和隐藏
• v-if 组件真正的渲染和销毁，而不是显示和隐藏

为何在v-for使用key

• 必须用 key ， 且不能是 index 和 random
• diff 算法中通过 tag 和 key 来判断，是否是 sameNode
• 减少渲染次数，提升渲染性能

Vue 组件生命周期(包括父子组件)

参考：Vue生命周期

Vue 组件如何通信(常见)

• 父子组件 props 和 this.$emit
• 自定义事件 event.$no event.$off event.$emit
• vuex

描述组件渲染和更新的过程

如上图所示，vue原理三大模块：响应式、模板渲染、vdom

初次渲染过程

• 解析模板为 render 函数 (或在开发环境已完成，vue-loader)
• 触发响应式，监听 data 属性 getter、 setter
• 执行 render 函数，生成 vnode ，patch(elem,vnode)

更新过程

• 修改 data，触发 setter(此前在 getter 中已被监听)
• 重新执行 render 函数，生成 newVnode
• patch(vnode,newVnode)

with 语法

改变 { } 内自由变量的查找规则，当做 obj 属性来查找如果找不到匹配的 obj 属性，就会报错with 要慎用，它打破了作用域规则，易读性变差

vue为何是异步渲染

• 减少 DOM 操作次数，提高性能

$nextTick 待 DOM 渲染完后再回调，页面渲染时会将 data 的修改做整合，多次 data 修改只会渲染一次。

双向数据绑定 v-model 的实现原理

• input 元素的 value = this.name
• 绑定 input 事件 this.name = $event.target.value
• data 更新触发 re-render

对 MVVM 的理解

computed 有何特点

• 缓存，data 不变不会重新计算
• 提高性能

为何组件 data 必须是一个函数

如上图所示，这个不是 vue 相关问题，而是关于 js 方面问题。vue 文件编译之后实际上是 class ，是一个类。而对组件使用的时候，相当于对组件进行了实例化。如果 data 不是一个函数的话，那每一个组件实例就共享了，就会造成数据污染问题。而函数的话，就会形成闭包，保护变量，不会造成影响。

ajax 请求应该放在哪个生命周期

• mounted
• JS 是单线程的，ajax 异步获取数据
• 放在 mounted 之前没有用，只会让逻辑更加混乱

如何将组件所有 props 传递给子组件

• $pros
• 用法：

如何自己实现 v-model

如何自己实现 v-model

多个组件有相同的逻辑，如何抽离

• mixin

何时要使用异步组件

• 加载大文件
• 路由异步加载
• 优化性能

何时使用 keep-alive

• 缓存组件，不需要重复渲染
• 如多个静态 tab 页的切换
• 优化性能

何时需要使用 beforeDestory

• 解绑自定义事件 event.$off
• 清除定时器
• 解绑自定义的 DOM 事件，如window scroll 等

什么是作用域插槽

请用 vnode 描述一个 DOM 结构

场景：

vnode:

diff 算法的时间复杂度

• O(n)
• 在O(n^3)上做了优化

简述 diff 算法过程

• patch ( elem , vnode ) 和 patch ( vnode , newVnode )
• patchVnode 和 addVnodes 和 removeVnodes
• updateChildren (key的重要性)

vue 常见性能优化方式

• 合理使用 v-show 和 v-if
• 合理使用 computed
• v-for 时加 key，以及避免和 v-if 同时使用
• 自定义事件、DOM事件及时销毁
• 合理使用异步组件
• 合理使用 keep-alive
• data 层级不要太深
• 使用 vue-loader 在开发环境做模板编译(预编译)
• webpack层面的优化(传送门)
• 使用SSR