Vue.js开发基础特性（部分）

一、常用指令

1. v-model

   • 描述：实现双向数据绑定。
   • 用法：用于表单元素，如input、textarea等。
   • 示例：<input v-model="message">

2. v-if / v-else / v-else-if

   • 描述：条件渲染指令。
   • 用法：根据条件来决定是否渲染某个元素。
   • 示例：<div v-if="type === 'A'">A</div><div v-else-if="type === 'B'">B</div><div v-else>C</div>

3. v-for

   • 描述：循环渲染指令。
   • 用法：用于列表渲染。
   • 示例：<div v-for="item in items">{{ item }}</div>

4. v-on / @

   • 描述：事件监听指令。
   • 用法：用于监听DOM事件。
   • 示例：<button v-on:click="increment">Increment</button>

5. v-bind

   • 描述：绑定属性指令。
   • 用法：用于动态绑定DOM属性。
   • 示例：<img v-bind:src="imageSrc">

6. v-text

   • 描述：更新元素的textContent。
   • 用法：用于更新元素文本内容。
   • 示例：<div v-text="message"></div>

7. v-html

   • 描述：更新元素的innerHTML。
   • 用法：用于更新元素的HTML内容。
   • 注意：使用时需谨慎，防止XSS攻击。
   • 示例：<div v-html="htmlContent"></div>

8. v-pre

   • 描述：跳过编译。
   • 用法：用于展示原始内容。
   • 示例：<div v-pre>This will not be compiled</div>

9. v-cloak

   • 描述：延迟移除v-cloak样式，直到Vue实例初始化完成。
   • 用法：用于隐藏未编译的文本。
   • 示例：<div v-cloak>{{ message }}</div>

10. v-once

• 描述：只渲染一次，即使数据变化也不重新渲染。
• 用法：用于优化性能。
• 示例：<div v-once>This will only be rendered once</div>

1. v-memo (Vue 3引入)

• 描述：基于其表达式的值进行缓存，仅在表达式的值发生变化时重新渲染。用于实现React Hooks的useMemo或useCallback类似功能。
• 用法：通常与计算属性一起使用，以避免不必要的渲染。
• 示例：<div v-memo="expensiveComputation"></div>

1. v-slot (Vue 2.6+引入)

• 描述：用于作用域插槽，允许你为组件定义插槽内容。
• 用法：通常与组件的插槽一起使用，以定义插槽的内容。
• 示例：<my-component v-slot:header="slotProps">Some default content</my-component>

1. v-intersect (Vue 3+)

• 描述：监听元素的可见性变化，当元素进入或离开视窗时触发回调函数。
• 用法：通常与Intersection Observer API一起使用，以检测元素是否在视窗中可见。
• 示例：<div v-intersect="{enter: 'enter', leave: 'leave'}"></div>

1. v-model-lazy (自定义指令)

• 描述：模拟懒加载的v-model指令，通常用于图片预加载等场景。
• 用法：将图片的src绑定到该指令，并在指令内部处理懒加载逻辑。
• 注意：该指令是自定义指令，需要自行实现并注册到Vue实例中才能使用。

二、计算属性和监听属性

一、计算属性 (Computed Properties)

计算属性是基于其依赖进行缓存的。只有在相关依赖发生改变时才会重新求值。这使得计算属性非常适合用于处理复杂逻辑或基于多个源数据的聚合值。

1. 语法:
   使用 computed 关键字定义计算属性，并为其指定一个或多个依赖。

computed: {  
  computedProp() {  
    // 返回值依赖于其他数据属性  
    return this.someData * this.otherData;  
  }  
}

2.特性:

• 缓存性：除非依赖发生改变，否则不会重新求值。
• 响应性：当依赖发生变化时，计算属性会自动更新。
• 同步与异步：计算属性可以是同步或异步的，取决于其内部逻辑。

3.拓展:

• 计算方法的异步性: 当计算属性需要执行异步操作时，可以使用 async 和 await 关键字来处理。但请注意，这会使计算属性变为异步，并可能在性能上产生影响。
• 组合式API: Vue 3引入了组合式API，其中 reactive 和 computed 可以与 ref 和 reactive 结合使用，为Vue组件提供更灵活的状态管理方式。

二、监听属性 (Watch Properties)

监听属性允许你观察和响应Vue实例上的数据变化。它们比计算属性更加灵活，因为你可以定义自定义的回调函数来响应数据变化。

1. 语法:
   使用 watch 选项来定义监听器。可以监听单个属性或整个对象。

watch: {  
  someData(newVal, oldVal) {  
    // 当 someData 发生变化时执行的操作  
  },  
  // 深度监听整个对象的变化  
  obj: {  
    handler(newVal, oldVal) { /* ... */ },  
    deep: true  
  }  
}

2.特性:

• 自定义性：可以定义自己的回调函数来响应数据变化。
• 深度监听：通过设置 deep 为 true，可以监听对象属性的深度变化。
• 延迟性：默认情况下，监听器只在组件渲染后执行一次。若要实时响应，需设置 immediate 为 true。

3.拓展:

• 动态监听: 可以使用计算属性作为监听属性的依赖，以动态地决定是否需要监听某个属性。
• 取消监听: 当不再需要监听某个属性时，可以使用 unwatch 方法或直接将回调函数设置为 null 来取消监听。
• 性能优化: 对于大量数据的监听，考虑使用数组索引代替对象键名进行监听，以减少不必要的触发。
• 组合式API: 在Vue 3中，可以使用组合式API的 watchEffect 和 watch 来替代选项API中的相应功能。这提供了更好的组合和封装能力。

总结：计算属性和监听属性是Vue.js中非常重要的特性，它们各自有其独特的用途和优势。在开发过程中，根据具体需求选择合适的特性，并进行合理的优化和拓展，可以提高应用程序的性能和可维护性。随着Vue的不断发展和社区的繁荣，我们期待更多高级特性和最佳实践的出现，以帮助开发者更高效地构建复杂的前端应用。