Vue题目

Vue

1、vue解决了什么问题

解决了数据和控件双向绑定问题

2、MVVM的理解

MVVM是Model-View-ViewModel的缩写，

优点:

1. 主要目的是分离视图和模型
2. 降低代码耦合，提高视图或者逻辑的重用性
3. 提高了模块的可测试性

3、如何实现一个自定义组件，不同组件之间如何通信的？

父传子：父组件=> :dataname="dataname"
子组件 => props:['dataname']

子传父：父组件=> @eventName = ""

4、nextTick

5、生命周期

6、虚拟dom的原理

7、双向绑定的原理？数据劫持？

8、组件通信

父->子

子->父

非父子组件

9、Proxy 相比于 defineProperty 的优势

10、watch computed区别

11、virtual dom 原理实现

12、vue-router(hash， HTML5 新增的 pushState

单页应用，如何实现其路由功能---路由原理
vue-router如何做用户登录权限等
你在项目中怎么实现路由的嵌套

13、vuex的理解

1. Vuex是什么？怎么使用？哪种功能场景使用

   Vuex是vue的状态管理。在main.js中引入stroe，注入新建目录store，....export。场景：单页应用中，组件之间的状态，音乐播放，登陆状态，加入购物车

2. Vuex有哪几种属性
   Vuex有五种核心属性

• state => 基本数据
• getters => 从基本数据派生的数据
• mutations => 提交更改数据的方法，同步
• actions => 像一个装饰器，包裹mutations，使之可以异步
• modules => 模块化Vuex

3. 不用Vuex会有什么问题

14. 组件动态加载，组件懒加载

15. 动态加载路由，路由懒加载

16. watch里面有什么属性

• watch使用的几种方法

1. 通过watch监听data数据变化，数据变化时会打印当前值

watch: {
    data(val, newval) {
        console.log(val);
        console.log(newval);
    }
}

2. 通过watch监听docData数据的变化，数据发生变化时，this.change_number++(使用深度监听)

watch: {
    docData: {
        handler(newVal) {
            this.change_number++
        },
        deep: true
    }
}

3. 通过watch监听data数据的变化，数据发生变化时，执行changeData方法

watch: {
    data: 'changeData' // 值可以为methods的方法名
},
methods: {
    changeData(curVal,oldVal) {
        console.log(curVal,oldVal)
    }
}

• 详解watch中的immediate、handle和deep属性

1. immediate和handler

这样使用watch时有一个特点，就是当值第一次绑定时，不会执行监听函数，只有值发生改变才会执行，如果我么需要最初绑定值的时候也执行函数，就需要immeditae属性

watch: {
    docData: {
        handler(newVal) {
            this.change_number++
        },
        immediate: true
    }
}

2. deep

当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，此时就需要deep对对象进行深度监测

data (){
    return {
        docData: {
            'doc_id': 1,
            'tpl_data': 'abc'
        }
    }
},
watch: {
    docData: {
        handler(newVal) {
            this.change_number++
        },
        deep: true
    }
}

设置deep:true则可以监听到docData.doc_id的变化，此时会给docData所以属性都加上这个监听器，当对象属性较多时，每个属性值的变化都会执行handler，如果只需要监听对象中的一个属性值，则可以做一下优化：使用字符串的形式监听对象属性：

data () {
    return {
        docData: {
            'doc_id': 1,
            'tpl_data': 'abc'
        }
    }
},
watch: {
    'docData.doc_id': {
        handler(newVal, oldVal) {
            .......
        },
        deep: true;
    }
}