面试vue: nexttick、set、vuex、父子传值、coputed与watch的区别


Computedwatch的区别

computed擅长处理的场景:一个数据受多个数据影响,例如3+4

watch擅长处理的场景:一个数据影响多个数据

依赖性不同watch是主动性的;computed是被动的,也就是被依赖的

computed是计算出来的,是响应式的watch当变量发生变化是改变

动态组件上使用keep-alive

使用:(1)在动态组件上  (2)在路由上

keep-alive是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM,性能得到优化,比如子组件有input输入,切回来会保留刚输入的内容,不会重新渲染;订单的系统

  

 

:include="['a', 'b']">

父子传值

子组件访问父组件实例子 $parent  父组件访问子组件变量  this.$refs.usernameInput this.$children

vue双向数据绑定原理

(1)Vue 将遍历data对象中所有属性并使用 Object.defineProperty 把属性全部加上set和get访问

2)这样修改data的属性值时,会触发set方法(那么set方法主要有两个作用,一是改变data里面的属性值,二是发出数据变化的通知)

3)Observer作为数据的观察者,当数据发生变化set会发出通知,会被Observer观察到,然后通知到Watcher,最后更新视图

什么是vuex,使用vuex的好处

   what--->什么是vuex:Vuex是一个专为Vue开发的状态管理模式

   when--->使用:多个组件需要共享数据

   where--->在哪里使用过: 购物车 、组件之间的状态、登录状态

Vuex的好处:

(1) 状态存储是响应式

(2)不能随意修改Vuex的状态:改变store状态的唯一途径就是提交 (commit) mutation。

Vuex的核心概念(怎么使用):

(1)Store  容器   要使用Vuex,我们要创建一个实例 store ,我们称之为仓库,利用这个仓库 store 来对我们的状态进行管理  (2)State  这些状态就是一堆全局变量和数据。

(3)Getters 用mapgetters 获取getters中的属性

(4)Mutation  修改仓库store状态的唯一办法就是通过提交 mutation

(5)Actions   发布命令  而不是直接变更状态。 Action 可以包含任意异步操作,

(6)Modules 面对复杂的应用程序,管理的状态比较多时,我们需要将vuex的store,对象分割成模块modules

原型绑定

native:我们可以称native为原型绑定。只有使用vue组件(子元素)时我们会用到这个修饰符

Prevent 和 stop

key的作用主要是为了高效的更新虚拟DOM

This.$nextTick的作用

及时地DOM 更新

比如你想让一个dom元素显示,然后下一步去获取这个元素的offsetWidth,最后你获取到的会是0,,此时需要nextTick

$set作用及使用场景

作用:手动让vue实现动态绑定数据

使用场景:

1)通过数组的下标去修改数组的值,数据已经被修改了,但是不触发updated函数,视图不更新

2)vue中检测不到对象属性的添加和删除