Vue2.x的一些基本知识

Vian
236 阅读6分钟
  1. 说一下你对MVVM的理解。
M：Model 数据层，业务逻辑
V：View 视图层
VM： ViewModel 处理数剧，监听数据，触发视图层更新。
Model与View通过VM关联，数据改变触发视图层更新，反之一样。
  1. Vue2.x是如何实现对数据的监听实现响应式数据。
也可以看这个理解一下：https://juejin.cn/post/6935007834014744589
（1）Vue2是通过Object.defineProperty()实现对data里数据监听，发生改变触发更新操作。
（2）但是上述不能实现数组的监听，vue通过原型拦截的方法重写的数组的一些api，当使用Vue中
的data是数组的时候，触发相应的更新。
Tip:如何避免数组触发多次getter和setter呢？
An: 1.判断key是否为当前代理的本身属性。
    2.判断前后的的值是否发生了改变。
  1. Vue3是通过什么方式实现的响应式数据。
Vue3是通过更加高效的Proxy方式实现的响应式数据，可以实现对对象，数组的一些监听。
Tip: 那么Proxy只会代理对象的第一层，如何实现深度代理呢
An: 通过Reflet.get 判断返回的是否是object，如果是在使用reactive做代理
  1. Vue中的data为什么是已函数的形式返回呢？
比如常见的都是这么定义的
data(){
  return {
    someData: {}
 }}
一个组件被引用多次，会有多个实例，但这些实例本质是同一个构造函数。
如果是对象的话，对象是引用数据类型，一个组件data的改变会影响到其它组件的data，
为避免相互影响使用函数的形式。
  1. Vue中的wacth和computed有什么区别吗？
computed是计算属性，通过一个或多个属性值的变化，返回某个值。
wacth是对某个值进行监听操作。根本区别是computed是具有缓存属性，watch是实时监听，过多使用
watch会有一些性能上的问题。
Tip: wacth如何实现深度监听，和立即执行。
watch: {
  someData: {
     deep: true, // 深度
     immediate: true,// 立即执行
     handler: 'some-function' // 执行函数
    }
}   
Tip: computed使用的时候为什么可以像使用data中的变量一样。
computed的本质是一个具有getter和setter属性的函数
可以这么写
computed: {
   list(){
 return 'someData'  }
}
也可以
computed: {
   list: {
  get(){
 return 'someData'
},
get(value){
}   }
}
  1. Vue中的nextTick有用过吗？是什么的。
在下次Dom更新之后执行延迟回调。nextTick主要用到了js的事件循环机制EventLoop,
在运行中用到了宏任务和微任务，根据不同的环境分别使用 Promise,setImmediate, MusationObserver
  1. Vue中的两种路由模式是什么
history模式和hash模式，有什么区别呢，hash路由是已#结尾的。
  1. v-model的作用是什么，是如何实现的。
本质是一个 v-on 和v-bind的语法糖
  1. v-if 和v-show有什么区别，可以和v-for连用吗
v-if是条件渲染，dom不会渲染，v-show通过display控制显示隐藏，不能和v-for一起连用。
  1. 对Vue生命周期的理解，网络请求一般可以放在哪个生命周期。
网络请求一般放在created中，也可以放到mouted中。 
beforeCreate: new Vue()之后的一个钩子，在这个阶段data、methods、computed等方法无法调用.
created: 数据已经完成了绑定，可以使用data、methods，但是不会触发update，无法与Dom进交互 不过也可以通过vm.$nextTick与交互。 
beforeMount: 在挂载之前，VNode已经形成，可以进行数据的更改，但是不会触发update。
mounted: 组件完成渲染，也挂载成了真实DOM节点。数据完成了双向绑定，可以通过$refs获取DOM。
beforeUpdate: 在VNode更新之前，可以进行数据的更改，不会渲染。 
updated: 组件渲染之后，此时真实Dom已经完成渲染，避免在此阶段更改数据。 
beforeDestory: 在实例销毁之前，此时还能访问到data，可以清除定时器，清除一些事件监听。
destoryed: 实例销毁之后，组件销毁完成，数据绑定不存在，监听也不存在了。
  1. Vue中的mixin有用过吗
有用过，是一种代码混入，是vue对不同组件相同功能的一种复用，减少代码量，混入可以包括组件任何
选项。如果混入中定义了和组件相同的变量，方法名，已组件中的为最终效果。
  1. Vue事件绑定的原理，组件事件绑定的原理。（***）
vue的原生事件绑定使用的是addEventlistener(),组件使用的是自定义的on实现的监听，on实现的监听，on实现的监听，emit触发.
具体的实现参见源码：
Vue.prototype.on = function (event, fn): Component {  
const vm: Component = this  
if (Array.isArray(event)) { 
 // 有可能传过来的是数组需要循环处理  
for (let i = 0, l = event.length; i < l; i++) 
    {  vm.on(event[i], fn)}
} else {
(vm._events[event] || (vm._events[event] = [])).push(fn)
    // optimize hook:event cost by using a boolean flag marked at registration
    // instead of a hash lookup
        if (hookRE.test(event)) {
           vm._hasHookEvent = true
         }
}
return vm
}
再此不做详细解释了。
  1. Vue模板编译的理解。（****）
vue的模板编译其实就是把template转化为render函数，在渲染成实际dom的过程，大概要经历以下几个
步骤，首先转化为AST抽象语法树，接着做AST的优化，找到静态节点空节点等，打上标记，然后在把AST转
化为渲染函数。
  1. Vue组件之间是如何传值的？
父传子: props
子传父: emit
其它层级组件:
（1）事件中心，创建一个EventBus，通过EventBus.$emit触发，通过EventBus.$on监听
（2）通过组件的ref，$children,$parent v-model
（3）provide，inject,他们两个需要连起来一起用。provide注入，inject接受
  1. Vue中虚拟Dom中的key的作用是什么？
key的主要作用是用来更快速的更新虚拟Dom,节约浏览器性能。
  1. Vuex中store中的state如何改变？
通过commit（提交）mutation来改变，mutation是同步的，action是异步。
  1. 为什么mutation的更改可以通过Action分发？action可以异步操作?
vuex是一个状态管理器，store中存着一些数据，更改这些数据通过commitmutation来改变，但是mutation只能
是同步的，如果你想要有些异步操作就需要通过action来comite。
  1. keep-alive的理解？
是vue中自带的一种缓存组件，接受三个参数
  • include 字符串或者正则表达式，只有匹配到名字的组件才会缓存。
  • exclude 字符串或者正则表达式，匹配到名字的组件不会缓存。
  • max 缓存组件的最大值

WX20210402-115702@2x.png 19. Vue虚拟Dom如何产生的，Diff算法都有哪些过程？

1.
  1. SSR技术有了解过吗？
服务端渲染。
  1. 如何从代码上优化项目呢？
1.
avatar
文章
阅读
粉丝