vue应用 - 1.面试必问

• 说一下对mvvm的理解

 1. mvc - 用户在视图(view)触发按钮或者事件(Controller)，控制器修改了(model),model在把修改同步到view中
	M - Model 数据
	V - View 视图、界面
	C - Controller 控制器、逻辑处理
2. 
	Model - 模型、数据
	View - 视图、模板(视图和模板是分离的)
	ViewModel - 连接Model和view
3. mvvm核心就是数据发生变化的时候自动刷新dom，这使得我们能从繁琐的 Dom 操作中解放出来，从而专心地去处理业务逻辑（https://www.njleonzhang.com/2018/09/26/vue-reactive.html#%E5%AE%98%E6%96%B9%E7%9A%84%E7%AE%80%E6%98%8E%E8%A7%A3%E9%87%8A）
4. mvvm的设计模式是观察者模式
	4-1：任何一个 Vue Component 都有一个与之对应的 Watcher 实例。
	4-2：vue初始化会给每个 component 中添加dep实例，并且会在 data和props 上的属性会被添加 getter 和 setter 属性，
	4-3：当执行到render函数的时候，会触发getter函数，调用depend方法收集此组件依赖的所有data，并发布订阅，建立联系
	4-4：data 被改动时，setter 方法会被调用，调用notify方法通知所有依赖于此 data 的组件去调用他们的 render 函数进行更新。
	

• vue的整个实现流程

第一步从开发环境打包的时候它已经是render函数，会把data的属性全部变成js变量，v-if等指令变成js逻辑，最终返回虚拟dom，不同是使用了with方法，with方法就是简化对象的使用，例如：代码1代码1.width演示
第二步监听的时候使用object.defineProperty的get，set方法监听

1. 解析模板成render函数
2. 响应式开始监听
3. 首次渲染，显示页面，且绑定依赖，类似vdom的path
4. data属性变化，触发rerender(就是render的再次执行)， 类似vdom的patch的对比渲染
5. 
代码1.with演示：
var obj = {
    title: 1
}
// with用法，简化不用写obj.title
with(obj){
    return _c('div',{}, title)
}

• vue的生命周期

beforCreate/cerated(可以在created中首次拿到data中定义的数据)
beforMount/mounted(此时dom树渲染结束，可访问dom结构)
beforUpdate/updated
beforDestroy/destroyed

• Vue的Computed中的setter的使用

简单介绍:
在 Vue 中，computed 的属性可以被视为是 data 一样，可以读取和设值，因此在 computed 中可以分成 getter（读取） 和 setter（设值），一般情况下是没有 setter 的，computed 预设只有 getter ，也就是只能读取，不能改变设值。

vue.js计算属性默认只有 getter，因为是默认值所以我们也常常省略不写，如下代码：
<div id="demo">{{ a }}</div>
var vm = new Vue({
  el: '#demo',
  data: {
    return {
    	a: 1
    }
  },
  computed: {
    aPlus: function () {
      return this.a + 1
    }
  }
})
其实computed里的代码完整的写法应该是：
computed: {
   aPlus: {
     get(){
        return this.a + 1
     }
   }
 }
 读取和设置computed值：
 aPlus: {
     get: function () {
       return this.a + 1
     },
     set: function (v) {
       this.a = v - 1
     }
  }
  读取：this.aPlus  得到的值2
  设置：this.aPlus = 3 会走set方法，v就是3

• watch 深层监听

1. watch默认一开始是不监听的
2. 如果将 immediate 设置为 true 则在监听函数后立即执行
3. deep 为 true 则可以深层监听
4. 利用deep深层监听会有性能损耗，则可以用字符串监听例如：'obj.a': {}
5. 详解可参考 https://www.cnblogs.com/yesu/p/9546458.html

• v-for 中 key 的作用

详解：https://segmentfault.com/a/1190000013810844?utm_source=tag-newest

• $nextTick 的作用

举一个场景：created的时候dom是没有渲染的，如果希望在created中获取到dom，则需要在$nextTick中获取，$nextTick是异步的
created() {
     this.$nextTick(() => {
         console.log(this.$refs.test)
     })
 },
 mounted() {
     console.log(this.$refs.test)
 }

• $set 的作用

export default {
    data(){
        return {
            obj:{}
        }
    },
    mounted() {
        // this.obj.e = 0 // 不起作用
        this.$set(this.obj,'e', 0)
    },
    methods: {
        add() {
            this.obj.e ++
        }
    }
}

• 递归组件

递归组件的必要条件

1. 这个函数必须有函数名称
2. 这个递归函数必须有结束条件,不然就会报Maximum call stack size exceeded,内存溢出

父组件：

<template>
    <c-view :tresData="treeData"></c-view>
</template>
<script>
import cView from "../components/c.vue"
export default {
    components: {
        cView
    },
    data() {
        return {
           treeData: [
                {
                    id: "1",
                    menuName: "笑傲江湖",
                    menuCode: "1",
                    children: [
                        {
                            menuName: "令狐冲",
                            menuCode: "10"
                        },
                        {
                            menuName: "东方不败",
                            menuCode: "11"
                        }
                    ]
                },
                {
                    id: "2",
                    menuName: "射雕英雄",
                    menuCode: "2",
                    children: [
                        {
                            menuName: "蓉儿",
                            menuCode: "20"
                        },
                        {
                            menuName: "郭靖",
                            menuCode: "21"
                        }
                    ]
                }
            ]
        }
    },
    mounted() {
       
    }
}
</script>

子组件

<template>
    <div>
        <ul>
            <li v-for="(item, i) in tresData" :key="i">
                {{ item.menuName }}
                <tree v-if="item.children && item.children.length" :tresData="item.children"></tree>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    name: 'Tree',
    props: ['tresData']
}
</script>