方法和计算属性

方法

我们可以使用 v-on 指令 (简写为 @) 来监听 DOM 事件，并在事件触发时执行对应的 JavaScript。用法：v-on:click="onOuterClick" 或 @click="onOuterClick"。

<button type="success" @click="onOuterClick">方法事件</button>
const onOuterClick = () => {
  ElMessage('方法事件处理器');
};

计算属性

• 计算属性是基于它们的响应式依赖进行缓存的，只在相关响应式依赖发生改变时它们才会重新求值。
• 计算属性 ref 也会在模板中自动解包，因此在模板表达式中引用时无需添加 .value。
• 写法有别于vue2，每个计算属性都是单独写的
• computed() 方法期望接收一个 getter 函数，返回值为一个计算属性 ref。
• 计算属性的 getter 应只做计算而没有任何其他的副作用，这一点非常重要，请务必牢记。举例来说，不要在 getter 中做异步请求或者更改 DOM

<button type="primary" @click="addBooks">加本书</button>
<button type="success" @click="addCity">加个城市</button>
<button type="success" @click="updateBookamount">修改书的数量</button>
<button type="success" @click="getLatestBooksAmount">获取最新的书的数量</button>
<p>我看过 {{ bookAmount }} 本书,去过{{ cityAmount }}个城市</p>

我看过 2 本书,去过1个城市

const bookList = ref(['红楼梦', '西游记']);
const cityList = ref(['北京']);
const addBooks = () => {
  bookList.value.push('水浒传');
};
const addCity = () => {
  cityList.value.push('郑州');
};
const bookAmount = computed(() => bookList.value.length);
const cityAmount = computed(() => cityList.value.length);
const getLatestBooksAmount = () => {
  const latestBooksAmount = bookAmount.value;
  ElMessage(`${latestBooksAmount}本书`);
};

从计算属性返回的值是派生状态。可以把它看作是一个“临时快照”， 每当源状态发生变化时，就会创建一个新的快照。 更改快照是没有意义的，因此计算属性的返回值应该被视为只读的， 并且永远不应该被更改——应该更新它所依赖的源状态以触发新的计算。

const updateBookamount = () => {
  // computed value is readonly
  bookAmount.value = 100;
};

可写计算属性

const firstName = ref('John');
const lastName = ref('James');
const fullName = computed({
  /**
    计算属性的 getter 应只做计算而没有任何其他的副作用，这一点非常重要，请务必牢记。
    举例来说，不要在 getter 中做异步请求或者更改 DOM！
  */
  get() {
    return `${firstName.value} ${lastName.value}`;
  },
  set(newValue) {
    // 注意：我们这里使用的是解构赋值语法
    [firstName.value, lastName.value] = newValue.split(' ');
  },
});
const getFullName = () => {
  ElMessage(fullName.value);
};
const updateName = () => {
  fullName.value = 'John Jordan';
  ElMessage(fullName.value);
};