Vue中级知识点

# 为什么data是个函数并且返回一个对象呢？

data之所以是一个函数，是因为一个组件可能会多处调用，而每一次调用就会执行data函数并返回新的数据对象，这样，可以避免多处调用之间的数据污染。

# 组件之间的传值方式有哪些？

父组件传值给子组件，子组件使用props进行接收
子组件传值给父组件，子组件使用$emit+事件对父组件进行传值
组件中可以使用$parent和$children获取到父组件实例和子组件实例，进而获取数据
使用$attrs和$listeners，在对一些组件进行二次封装时可以方便传值，例如A->B->C
使用$refs获取组件实例，进而获取数据
使用Vuex进行状态管理
使用eventBus进行跨组件触发事件，进而传递数据
使用provide和inject，官方建议我们不要用这个，我在看ElementUI源码时发现大量使用
使用浏览器本地缓存，例如localStorage

# 路由有哪些模式呢？又有什么不同呢？

hash模式：通过#号后面的内容的更改，触发hashchange事件，实现路由切换
history模式：通过pushState和replaceState切换url，实现路由切换，需要后端配合

# 如何设置动态class，动态style？

动态class对象：<div :class="{ 'is-active': true, 'red': isRed }"></div>
动态class数组：<div :class="['is-active', isRed ? 'red' : '' ]"></div>
动态style对象：<div :style="{ color: textColor, fontSize: '18px' }"></div>
动态style数组：<div :style="[{ color: textColor, fontSize: '18px' }, { fontWeight: '300' }]"></div>

# v-if和v-show有何区别？

v-if是通过控制dom元素的删除和生成来实现显隐，每一次显隐都会使组件重新跑一遍生命周期，因为显隐决定了组件的生成和销毁
v-show是通过控制dom元素的css样式来实现显隐，不会销毁
频繁或者大数量显隐使用v-show，否则使用v-if

# computed和watch有何区别？

computed是依赖已有的变量来计算一个目标变量，大多数情况都是多个变量凑在一起计算出一个变量，并且computed具有缓存机制，依赖值不变的情况下其会直接读取缓存进行复用，computed不能进行异步操作
watch是监听某一个变量的变化，并执行相应的回调函数，通常是一个变量的变化决定多个变量的变化，watch可以进行异步操作
简单记就是：一般情况下computed是多对一，watch是一对多

# 为什么v-if和v-for不建议用在同一标签？

在Vue2中，v-for优先级是高于v-if的，咱们来看例子

<div v-for="item in [1, 2, 3, 4, 5, 6, 7]" v-if="item !== 3">
    {{item}}
</div>

1
2
3

上面的写法是v-for和v-if同时存在，会先把7个元素都遍历出来，然后再一个个判断是否为3，并把3给隐藏掉，这样的坏处就是，渲染了无用的3节点，增加无用的dom操作，建议使用computed来解决这个问题：

<div v-for="item in list">
    {{item}}
</div>

computed() {
    list() {
        return [1, 2, 3, 4, 5, 6, 7].filter(item => item !== 3)
    }
}

1
2
3
4
5
6
7
8
9

# 不需要响应式的数据应该怎么处理？

在我们的Vue开发中，会有一些数据，从始至终都未曾改变过，这种死数据，既然不改变，那也就不需要对他做响应式处理了，不然只会做一些无用功消耗性能，比如一些写死的下拉框，写死的表格数据，这些数据量大的死数据，如果都进行响应式处理，那会消耗大量性能。

// 方法一：将数据定义在data之外
data () {
    this.list1 = { xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx }
    this.list2 = { xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx }
    this.list3 = { xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx }
    this.list4 = { xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx }
    this.list5 = { xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx }
    return {}
}
    
// 方法二：Object.freeze()
data () {
    return {
        list1: Object.freeze({xxxxxxxxxxxxxxxxxxxxxxxx}),
        list2: Object.freeze({xxxxxxxxxxxxxxxxxxxxxxxx}),
        list3: Object.freeze({xxxxxxxxxxxxxxxxxxxxxxxx}),
        list4: Object.freeze({xxxxxxxxxxxxxxxxxxxxxxxx}),
        list5: Object.freeze({xxxxxxxxxxxxxxxxxxxxxxxx}),
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# watch有哪些属性，分别有什么用？

当我们监听一个基本数据类型时：

watch: {
    value (newVal,oldVal) {
        // do something
    }
}

1
2
3
4
5

当我们监听一个引用数据类型时：

watch: {
    obj: {
       handler (newVal,oldVal) { // 执行回调
           // do something
       },
       deep: true, // 是否进行深度监听
       immediate: true // 是否初始执行handler函数
    }
}

1
2
3
4
5
6
7
8
9

# 父子组件生命周期顺序

父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted

# 对象新属性无法更新视图，删除属性无法更新视图，为什么？怎么办？

原因：Object.defineProperty没有对对象的新属性进行属性劫持
对象新属性无法更新视图：使用Vue.$set(obj, key, value)，组件中this.$set(obj, key, value)
删除属性无法更新视图：使用Vue.$delete(obj, key)，组件中this.$delete(obj, key)

# 说说nextTick的用处？

我举个例子，在vue中：

this.name = '林三心'
this.age = 18
this.gender = '男'

1
2
3

我们修改了三个变量，那问题来了，是每修改一次，DOM就更新一次吗？不是的，Vue采用的是异步更新的策略，通俗点说就是，同一事件循环内多次修改，会统一进行一次视图更新，这样才能节省性能嘛

看懂了上面，那你应该也看得懂下面的例子了吧：

<div ref="testDiv">{{name}}</div>

name: '小林'

this.name = '林三心'
console.log(this.$refs.testDiv.innerHTML) // 这里是啥呢

1
2
3
4
5
6

答案是“小林”，前面说了，Vue是异步更新，所以数据一更新，视图却还没更新，所以拿到的还是上一次的旧视图数据，那么想要拿到最新视图数据怎么办呢？

this.name = '林三心'
this.$nextTick(() => {
    console.log(this.$refs.testDiv.innerHTML) // 林三心
})

1
2
3
4

——暂无评论——

howcode