1、vue的双向绑定原理是什么？关键点在哪里？
双向绑定原理脑图.png
2、Vue中为什么data必须是一个函数，而New Vue实例中，data可以直接是一个对象
data.png
3、vue的两大核心
两个核心.png
4、Vue中v-for为什么要加一个key
image.png
5、Vuex有几个属性及作用
image.png
6、Vue的监听属性和计算属性有什么区别
image.png
7、Vue的导航守卫有哪些
image.png
8、Vue登陆拦截如何实现
image.png
9、Vue组件通信的方式有哪些
image.png
10、keep-alive是什么 有几个周期？如何避免被其缓存？
image.png
如何避免被keep-alive缓存
image.png
11、vuex刷新页面后数据丢失，如何保存数据
image.png
12、vue是如何依赖收集的
image.png
13、vue $nextTick及其作用
image.png
14、vue两种路由模式的区别
image.png
15、vue的优缺点
image.png
16、请简述vue数据传递过程
1、通过new Vuex.Store()创建一个仓库 state是公共的状态，state--->components渲染页面；
2、在组件内部通过 this.$store.satate.属性 来调用公共状态中的state，进行页面的渲染;
3、当组件需要修改数据的时候，必须遵循单向数据流。通this.$store.dispatch来触发actions中的方法
4、actions中的每个方法都会接受一个对象 这个对象里面有一个commit方法，用来触发mutations里面的方法
5、mutations里面的方法用来修改state中的数据 mutations里面的方法都会接收到2个参数 一个是store中的state另外一个是需要传递到参数
6、当mutations中的方法执行完毕后state会发生改变，因为vuex的数据是响应式的 所以组件的状态也会发生改变
17、vue中mixin和mixins的区别
image.png
18、watch与 watchEffect
image.png
setup(props) {
const { reactive,toRefs,watch,watchEffect } = Vue;
const nameObj = reactive({ name:'yh' ,EnglishName:'ji'})
// watch 是有一定的惰性 lazy 加上 immediate:true 可以改变惰性 立即执行
// 当 监听是基础数据是 可以使用 watch('name',() =>{})
// 当 监听数据 是单个数据对象时
// watch(()=>nameObj.name,(curName,prevName)=>{
// console.log(curName,prevName)
// })
// 当 监听数据是多个数据对象时
watch([()=>nameObj.name,()=>nameObj.EnglishName],([curName,curEng],[prevName,prevEng])=>{
console.log('watch',curName,curEng ,'---',prevName,prevEng)
})
// watchEffect 是立即执行 不需要传递侦听内容 会自动感知 不需要很多参数 只需要一个回调函数
// 不能获取之前数据的值
watchEffect(() =>{
console.log('abc')
})
const { name,EnglishName } = toRefs(nameObj)
return { name,EnglishName }
}
