Vue常见面试题当值为非数组、对象时。直接用watch监听 props的值可以通过实例一个vue实例Bus作为媒介，

一、Vue生命周期

beforeCreate 组件实例被创建之初，调用的时候，是获取不到 props 或者 data 中的数据的
creted 组件实例已经完全创建，属性也绑定，但真实 dom 还没有生成
beforeMount dom就是在挂载前执行的，然后开始创建 VDOM 并替换成真实 DOM，最后执行 mounted 钩子
mounted html渲染完成，执行dom时调用，
beforeUpdate 组件数据更新之前调用，发生在虚拟 DOM 打补丁之前
updated 组件数据更新之后
beforeDestroy 组件销毁前调用
destroyed 组件销毁后调用

二、Vue组件通信

父组件向子组件传值

正常传值
- 在父组件通过标签传值，在子组件中通过props进行获取
- 通过 $children 访问子组件数组，注意该数组乱序

父组件动态传值

当值为非数组、对象时。直接用watch监听 props的值

 watch() {
     pzmString(newValue, oldValue) {
         console.log(newValue, 'pzmString')
     }
 }

当为数组时

watch() {
   pzmArray: {
       handler(newValue, oldValue) {
           for (let i = 0; i < newValue.length; i++) {
               if (oldValue[i] != newValue[i]) {
                   console.log(newValue, 'pzmArray')
               }
           }
       },
       deep: true, // 可以深度检测到 pzmArray 的变化
       immediate: true // 代表在wacth里声明了PzmArr这个方法之后立即先去执行handler方法
   }
 }
}

当为对象时

watch() {
   pzmObj: {
       handler(newValue, oldValue) {
           console.log(newValue, 'pzmObj')
       },
       deep: true // 可以深度检测到  pzmObj对象的属性值的变化
   }
}

子组件向父组件传值
- 子组件通过$emit() 传送参数
- 在父组件中通过$refs（获取子组件的实例）
- 通过 $parent 访问父组件
兄弟组件传值

可以通过实例一个vue实例Bus作为媒介，要相互通信的兄弟组件之中，都引入Bus，然后通过分别调用Bus事件触发和监听来实现通信和参数传递。 Bus.js可以是这样:
```
 import Vue from 'vue'
 export default new Vue()
```
在需要通信的组件都引入Bus.js，通过$emit() 传送，兄弟组件用通过 on() 来接收
vuex可以解决上面所有传值*

三、对于MVVM的理解

MVVM是 Model-View-ViewModel 缩写

Model：数据模型，主要提供数据修改和操作的业务逻辑
View：视图层，用户界面，将数据模型转化为UI展示出来
ViewModel：业务逻辑层，View和Model的沟通桥梁，监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步View 和 Model的对象，连接Model和View
MVVM核心为数据双向绑定
在MVVM模式下，View和Model直接没有直接对联系，而是通过ViewModel进行交互。其利用数据双向绑定，Model改变时ViewModel也会自动更新，同时ViewModel变化时View也变化。（简单来数据和改变视图，视图也会影响到数据）

四、MVVM和MVC区别

MVVM和MVC都是一种设计模式
MVC中都C Controll 演变为MVVM 中ViewModel
MVVM主要解决了MVC中大量DOM操作，提高页面渲染性能、页面加载速度，优化用户体验

五、Vue数据双向绑定原理

采用数据劫持结合发布-订阅者模式的方式，以 Object.defineProperty() 来劫持各个属性的getter,setter,在数据变动时发布给订阅者，触发相应监听回调。Vue3.0改为 new Proxy() 放弃兼容IE

<body>
    <div id="app">
    <input type="text" id="txt">
    <p id="show"></p>
</div>
</body>
<script type="text/javascript">
    var obj = {};
    // 观察者模式 / 钩子函数
    // defineProperty 来定义一个对象的某个属性
    Object.defineProperty(obj, 'txt', {
        get: function () {
            return obj
        },
        set: function (newValue) {
            document.getElementById('txt').value = newValue
            document.getElementById('show').innerHTML = newValue
        }
    })
    document.addEventListener('keyup', function (e) {
        obj.txt = e.target.value
    })
</script>

Proxy

<body>
    <div id="app">
    <input type="text" id="txt">
    <p id="show"></p>
</div>
</body>
<script type="text/javascript">
    var obj = {};
     const newObj = new Proxy(obj, {
        get: function (target, key, receiver) {
            return Reflect.get(target, key, receiver);
        },
        set: function (target, key, value, receiver) {
            if (key === "text") {
                document.getElementById('txt').value = value；
                document.getElementById('show').innerHTML = value；
            }
            return Reflect.set(target, key, value, receiver);
        }
    })
    document.addEventListener('keyup', function (e) {
        newObj.txt = e.target.value
    })
</script>

发布者-订阅者模式: 其定义对象间一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知

六、Proxy相对于Object.defineProperty()的优势

Object.defineProperty() 的缺点
- 不能监听数组的变化
- 必须遍历对象的每个属性
- 必须深层遍历嵌套的对象
new Proxy() Proxy在ES2015规范中被正式发布
- 针对数组：Proxy不需要对数组方法进行重载，省去了众多hack，减少代码量等于减少了维护成本，而且标准的就是最好的
- 针对对象：针对每个对象，不是对象对某个属性，不需要再进行keys遍历
- 13中拦截方法
- Proxy作为新标准将受到浏览器厂商重点持续的性能优化

Vue常用的指令

v-model v-html v-on:click v-on:bind v-if  v-show v-for
:model  :html  @click

五、Vue和JQ区别，使用场景

区别：Vue数据驱动，通过改变数据去更新视图，JQ通过操作DOM去更新视图
场景：Vue适合复杂数据操作的页面。JQ适合一些H5动画页面，需要js来操作样式的页面

Vue常见面试题