vue3学习笔记

data-property

data是一个函数，这些实例 property 仅在实例首次创建时被添加。

// data函数返回一个对象，并用响应性系统包裹。以 $data 的形式存储在组件实例中
console.log(vm.$data.count) // => vm是实例，$data是包装过后的响应式的属性
console.log(vm.count)       // => 为了方便，data对象的属性被“直接暴露”

method 

1、Vue 自动为 methods 绑定 this，以便于它始终指向组件实例。

2、避免使用箭头函数

3、普通调用

<button @click="increment">Up vote</button>

4、模板中访问：这种情况一般使用计算属性，但是如果计算属性不行的时候可以使用方法

<!-- 3、模板中访问 -->
<span :title="toTitleDate(date)">{{ formatDate(date) }}</span>

计算属性

1、模板中的判断都应该换成计算属性或者method

2、基于它们的响应依赖关系缓存的。这也同样意味着下面的计算属性将不再更新，因为 Date.now () 不是响应式依赖：

computed: {
  now() {
    return Date.now()
  }
}

侦听器