VUE面试题-区分computed和watch的作用、概念和用法

"computed: 不能有异步，只能同步 watch: 可以有异步操作 二、Vue 中组件间的通信方式 1、Props / $emit 父组件通过 props 向子组件传递数据，子组件通过 $emit 触发自定义事件通知父组件。 2、$attrs / $listeners $attrs 包含了父作用域中不被子组件 prop 所识别 (且获取) 的特性绑定 (class和style除外)。$listeners 包含了父作用域中的 (不含 .native 修饰的) v-on 事件监听器。 3、Vuex 通过 Vuex 实现组件之间的状态管理，任何组件都可以获取全局状态，在任何组件中都可以修改全局状态。 4、Event Bus 可以通过事件总线的方式实现兄弟组件之间的通信，通过 $emit 触发事件，$on 监听事件。 5、$parent / $children 父组件可以通过 $children 直接访问所有的子组件实例，子组件可以通过 $parent 直接访问父组件实例。 6、Provide / Inject 父组件通过 provide 向子孙组件提供数据，后代组件通过 inject 注入所需的数据。 7、$refs 父组件可以通过 ref 给子组件添加引用，然后通过 this.$refs 获取子组件实例。 8、$bus 可以使用一个全局的事件总线来进行组件之间的通信。 三、Vue 中的生命周期钩子函数 1、beforeCreate 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。 2、created 实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。 3、beforeMount 在挂载开始之前被调用：相关的 render 函数首次被调用。 4、mounted 实例已经挂载到 DOM 上后被调用，实例的 $el 属性指向挂载的 DOM 元素。 5、beforeUpdate 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。 6、updated 由于数据更改导致的虚拟 DOM 重新渲染和打补丁之后被调用。 7、beforeDestroy 实例销毁之前调用。在这一步，实例仍然完全可用。 8、destroyed Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有事件监听器会被移除，所有子实例也会被销毁。 四、Vue 中的响应式原理 1、响应式对象 Vue 中的响应式对象指的是指通过 Vue 实例的 data 选项添加的属性。当这些属性的值发生变化时，视图会进行重新渲染，这就是 Vue 的响应式原理。 2、侦测变化 Vue 的响应式原理是通过 Object.defineProperty 方法实现的。当初始化 Vue 实例时，会遍历 data 对象的所有属性，使用 Object.defineProperty 将其转换为 getter 和 setter，当属性被访问时触发 getter，当属性被修改时触发 setter，从而实现对属性的侦测变化。 3、更新视图 当属性值发生变化时，会触发 setter 方法，通知 Vue 更新视图，Vue 会根据依赖收集到的 watcher，调用相应的 update 方法进行视图更新。 4、虚拟 DOM Vue 中使用虚拟 DOM 进行高效的视图更新。当数据发生变化时，Vue 会生成新的虚拟 DOM 树，然后和旧的虚拟 DOM 树进行对比，找出发生变化的部分，最后只会对发生变化的部分进行实际的 DOM 更新，从而大大提高了性能。 五、Vue 中的指令 1、v-if 根据表达式的值的真假，切换元素的存在。 2、v-show 根据表达式的值的真假，切换元素的显示与隐藏。 3、v-for 基于数据源进行循环渲染。 4、v-bind 根据表达式，动态地绑定一个或多个属性。 5、v-model 在表单控件或组件上创建双向绑定。"