Vue-Router

4版本所有的导航都是异步的,你可能需要等待路由 ready 好后再挂载程序

Vue-Router和组合式API

因为我们在 setup 里面没有访问 this，所以我们不能再直接访问 this.$router 或 this.$route。作为替代，我们使用 useRouter 和 useRoute 函数

计算属性

一个计算属性仅会在其响应式依赖更新时才重新计算

time(){return Data.now()}//这个计算属性不能改变,因为他是非响应式的

计算属性默认是只读的,但是也可以修改

export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  },
  computed: {
    fullName: {
      // getter
      get() {
        return this.firstName + ' ' + this.lastName
      },
      // setter
      set(newValue) {
        // 注意：我们这里使用的是解构赋值语法
        [this.firstName, this.lastName] = newValue.split(' ')
      }
    }
  }
}
//现在当你再运行 `this.fullName = 'John Doe'` 时，setter 会被调用   
// `this.firstName` 和 `this.lastName` 会随之更新

不建议在模版上绑定表达式中的方法在,组件每次更新时都会被重新调用，因此不应该产生任何副作用，比如改变数据或触发异步操作。(这可能会导致重复渲染)可以使用计算属性替代

监听器

使用watch选项

count(new,old){}

使用watch API,虽然监听器会在组件销毁时自动去除,但这种写法可以提前结束监听

export default {
  created() {
    this.$watch('question', (new.old) => {
      // ...
    })
  }
}

你不能直接侦听响应式对象的属性值例如

const obj = reactive({ count: 0 })

// 错误，因为 watch() 得到的参数是一个 number
watch(obj.count, (count) => {
  console.log(`count is: ${count}`)
})

这里需要用一个返回该属性的 getter 函数：

// 提供一个 getter 函数
watch(
  () => obj.count,
  (count) => {
    console.log(`count is: ${count}`)
  }
)

watchEffect 仅会在其同步执行期间，才追踪依赖。在使用异步回调时，只有在第一个 await 正常工作前访问到的属性才会被追踪。

父子通信

props emit
ref,通过expose可以限制对子组件实例的访问
provide inject 注意数据并不是响应式的,例如可以使用计算属性实现响应式

注意:注册组件时给的组件名MyDemo,在模板里可以写标签my-demo. Vue 在解析模板时会自动将短横线转换为驼峰式，并且也不会区分大小写，因此可以正常渲染组件。

相同的定义emit :this.$emit('someEvent') ,在模板上也可以使用@some-event

Vue3

Vue-Router

Vue-Router和组合式API

计算属性

监听器

父子通信