1.v-if 和 v-show 的区别?
v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁 和重建,操作的实际上是dom元素的创建或销毁。
v-show 不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换 它操作的是display:none/block属性。
一般来说, v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地 切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。
2.vue 内置指令
v-bind 用于响应式地更新 HTML 属性
v-model 在表单输入和应用状态之间创建双向数据绑定
v-if 根据表达式的真假值来条件性地渲染元素
v-else-if 表示 v-if
的“else if”块
v-else 为 v-if
、v-else-if
提供“else”块
v-for 基于一个数组来渲染一个列表
v-on 用于监听 DOM 事件,并在触发时执行一些 JavaScript 代码
v-show 根据表达式之真假值,切换元素的 display
CSS 属性
v-pre 跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签
v-cloak 这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none }
一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕
v-once 只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能
3.怎样理解 Vue 的单项数据流?
在Vue中,单向数据流是指数据的传递方向是单向的,从父组件向子组件进行传递。这意味着只有父组件可以改变数据,而子组件只能通过props接收数据,并且无法直接修改它们。这种单向数据流的设计原则有助于提高代码的可维护性和可预测性。
使用Vue单向数据流的好处:易于追踪数据流动,提高代码的可维护性,易于调试和测试。
4.computed 和 watch 的区别和运用的场景
区别:
-
功能差异:
-
computed:计算属性,它基于它们的依赖进行缓存。只有当相关依赖发生改变时,才会重新计算。适用于需要基于其他数据计算得出新值的场景。
-
watch:侦听器,它允许你执行异步操作或开销较大的操作,响应数据的变化。当需要监听某个数据的变化,并在数据变化时执行特定的逻辑(如发送请求、调用方法等)时,使用watch。
-
-
缓存机制:
-
computed:具有缓存机制,只有当依赖的数据发生变化时,才会重新计算。如果依赖的数据没有变化,多次访问computed属性时会返回缓存的值,从而提高性能。
-
watch:不具备缓存机制,每次数据变化都会执行回调函数,不考虑是否进行了计算或计算的结果是否相同。
-
-
执行时机:
-
computed:默认是懒执行的,即只有在需要时才会进行计算。
-
watch:可以设置为在数据变化时立即执行(通过设置
immediate: true
),或者在组件创建时立即执行一次(同样通过immediate: true
,但这通常与监听数据变化的初衷不符,更多是用于初始化)。
-
-
使用方式:
-
computed:在组件的
computed
选项中以键值对的形式定义,键是计算属性的名称,值是一个函数,该函数的返回值就是计算属性的值。 -
watch:在组件的
watch
选项中以键值对的形式定义,键是需要观察的数据或表达式的名称,值是一个对象或函数,用于定义当数据变化时应该执行的逻辑。
-
运用场景:
-
computed的运用场景:
-
数据格式化:如将日期、数字等格式化后展示。
-
复杂计算:根据多个数据计算出新的数据,如根据商品单价和数量计算出总价。
-
筛选过滤:根据某些条件筛选数组中的元素。
-
-
watch的运用场景:
-
异步操作:如监听输入框的值,当值变化时发送请求获取数据。
-
数据持久化:监听数据的变化,并在数据变化时保存到本地存储或服务器。
-
复杂逻辑处理:当数据变化时执行一系列复杂的逻辑操作。
-
5.Vue 2.0 响应式数据的原理
Vue 使用 Object.defineProperty
劫持对象的属性,为每个属性创建 getter 和 setter。当数据被访问或修改时,会触发相应的 getter/setter,从而进行依赖收集和派发更新。对于数组,Vue 重写了部分方法以确保数组的响应式。当数据变化时,Vue 异步更新 DOM,以提高性能。整个过程基于观察者模式,实现了数据变化时视图的自动更新。