-
Vue3中v-for与v-if一同使用的性能优化
2025/12/13 点击：1773
当v-for和v-if一起使用时，为了性能优化，可把v-if移到外层。这样可以避免不必要的循环。 template ul v-if="shouldShowItems" li v-for="item in items" :key="item.id" {{ item.name }} /li /ul/templatescript setupim
-
Vue3中计算属性computed的基本概念
2025/12/13 点击：3028
在Vue3里，计算属性computed是很实用的功能。它能根据已有数据算出新数据，避免在模板里写复杂表达式。 计算属性本质是函数，但用起来像数据。例如： const app = Vue.createApp({ setup() {
-
Vue3中计算属性computed的getter和setter
2025/12/13 点击：7579
计算属性默认只有getter，不过也能自定义setter。 示例如下： const app = Vue.createApp({ setup() { const firstName = ref('John'); const lastName = ref('Doe'); const fullName = computed({ get: () => { return `${firstName.v
-
Vue3中计算属性与方法的定义区别
2025/10/15 点击：1210
在Vue3中，计算属性和方法的定义方式不同。计算属性是通过 computed 函数来定义的，它会根据依赖的数据自动计算结果，并且会进行缓存。而方法是通过普通的函数来定义的。 import {
-
Vue3中计算属性与方法的调用区别
2025/10/15 点击：9005
计算属性在模板中使用时，就像普通的数据一样，不需要加括号调用；而方法在模板中使用时需要加括号调用。 import { ref, computed } from 'vue';const count = ref(0);const doubleCount = computed(() =>
-
Vue3中监听器回调值为方法的基本概念
2025/10/15 点击：7388
在Vue3里，监听器回调值可为方法。这意味着当被监听的值改变时，会调用这个方法。 例如下面代码，监听变量`count`的变化： import { ref, watch } from 'vue';const count = ref(0);watch(count, (newVal
-
多个值监听时回调值为方法的情况
2025/10/15 点击：2979
Vue3中可同时监听多个值，回调值为方法时也适用。 例如同时监听`count1`和`count2`： import { ref, watch } from 'vue';const count1 = ref(0);const count2 = ref(0);watch([count1, count2], ([newCount1, newCount2], [oldC
-
Vue3中监听器回调值为对象 - 基础概念
2025/10/15 点击：6234
在Vue3里，监听器可对数据变化作出响应。当监听器回调值为对象时，能监控对象属性变化。比如，有个对象{ name: 'John', age: 20 }，可监听其属性改动。 import { ref, watch } from 'vue';const per
-
Vue3中监听器回调值为对象 - 深度监听
2025/10/15 点击：6504
若要监听对象内部属性变化，可使用深度监听。比如对象{ address: { city: 'New York' } }，用深度监听能捕获到city属性的变化。 import { ref, watch } from 'vue';const person = ref({ address: { city: 'New Yor
-
Vue3中自定义指令 - 基本概念
2025/10/15 点击：9227
在Vue3里，自定义指令能让开发者创建可复用的DOM操作逻辑。自定义指令可在全局或组件内定义。 // 全局定义自定义指令const app = createApp({});app.directive('focus', { mounted(el) { // 元素挂载后自
