面试vue: nexttick、set、vuex、父子传值、coputed与watch的区别
Computed与watch的区别
computed擅长处理的场景:一个数据受多个数据影响,例如3+4
watch擅长处理的场景:一个数据影响多个数据
依赖性不同:watch是主动性的;computed是被动的,也就是被依赖的
computed是计算出来的,是响应式的;watch当变量发生变化是改变
动态组件上使用keep-alive
使用:(1)在动态组件上 (2)在路由上
keep-alive是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM,性能得到优化,比如子组件有input输入,切回来会保留刚输入的内容,不会重新渲染;订单的系统
:
或
父子传值
子组件访问父组件实例子 $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中检测不到对象属性的添加和删除