vue面试题 内含详细讲解（涵盖入门到精通，自测 Vue 掌握程度

数组语法：

data: {

activeClass: ‘active’,

errorClass: ‘text-danger’

}

Style 也可以通过对象语法和数组语法进行动态绑定：

对象语法：

data: {

activeColor: ‘red’,

fontSize: 30

}

数组语法：

data: {

styleColor: {

color: ‘red’

},

styleSize:{

fontSize:‘23px’

}

}

---

[](()四.怎么理解Vue的单向数据流？

=============================================================================

所有的prop都是的其父子prop之间形成了一个单向下行绑定；父级prop的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流难以理解。

额外的，每次父级组件发生更新时，子组件中所有的prop都会刷新为最新的值，这意味着你不应该在一个子组件内部改变prop。如果你这样做了，vue会在浏览器控制台中发出警告。子组件想修改时，只能通过$emit 派发一个自定义的事件，父组件接受到后，由父组件修改。

有两种常见的视图改变一个prop的情形：

• 这个prop 用来传递一个初始值；这个子组件接下来将其作为一个本地的prop数据来使用。在这种情况下，最好定义一个本地的data属性并将这个prop用作其初始值：

props: [‘initialCounter’],

data: function () {

return {

counter: this.initialCounter

}

}

• 这个 prop 以一种原始的值传入且需要进行转换。 在这种情况下，最好使用这个 prop 的值来定义一个计算属性

props: [‘size’],

computed: {

normalizedSize: function () {

return this.size.trim().toLowerCase()

}

}

[](()五.computed 和 watch 的区别和应用的场景？

==========================================================================================

computed： 是计算属性，依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值；

watch： 更多的是「观察」的作用，类似于某些数据的监听回调 ，每当监听的数据变化时都会执行回调进行后续操作；

运用场景：

• 当我们需要进行数值计算，并且依赖于其它数据时，应该使用 computed，因为可以利用 computed 的缓存特性，避免每次获取值时，都要重新计算；

• 当我们需要在数据变化时执行异步或开销较大的操作时，应该使用 watch，使用 watch 选项允许我们执行异步操作 ( 访问一个 API )，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。

[](()6.直接给一个数组项赋值，vue能检测到变化吗？

=====================================================================================

由于 JavaScript 的限制，Vue 不能检测到以下数组的变动：

• 当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue

• 当你修改数组的长度时，例如：vm.items.length = newLength

为了解决第一个问题，Vue 提供了以下操作方法：

// Vue.set

Vue.set(vm.items, indexOfItem, newValue)

// vm.$set，Vue.set的一个别名

vm.$set(vm.items, indexOfItem, newValue)

// Array.prototype.splice

vm.items.splice(indexOfItem, 1, newValue)

复制代码为了解决第二个问题，Vue 提供了以下操作方法：

// Array.prototype.splice

vm.items.splice(newLength)

[](()7.谈谈你对 Vue 生命周期的理解？

=======================================================