vue3学习笔记2

渲染函数

在vue3中 h 是全局引入的 ，而不是作为参数传递给渲染函数

render不再接收任何参数 ,主要在setup 函数内部使用

好处：可以访问在作用域中声明的响应式状态和函数，以及传递给setup 的参数

import { h, reactive } from 'vue' 

export default {
   setup(props, {slots, attrs, emit }) {
     const state  = reactive({
       count: 0
     })
     function increment() {
       state.count ++
     }


      render()=>
      h(
        'div',
        {
          onClick: increment
        },
        state.count
      )
   }
}

2.不能再用字符串ID隐式查找已注册组件 必须使用 resolveComponent

import {h, resolveComponent } from 'vue'

export default{
  setup() {
     const ButtonCounter = resolveComponent('button-counter')
     return () => h(ButtonCounter)
   }
}

插槽统一

this.$slots 将插槽作为函数公开，移除了this.$scopeSlots

移除$listeners

侦听数组

当使用 watch 选项侦听数组时 要想在数组被改变时触发侦听回调，必须指定 deep 选项。

watch: {
  bookList: {
    handler(val, oldVal) {
      console.log('book list changed')
    },
    deep: true
  },
}

过渡的 class 名更改

过渡类名 v-enter 修改为 v-enter-from、过渡类名 v-leave 修改为 v-leave-from

<transition> 组件的相关 prop 名称也发生了变化：

leave-class 已经被重命名为 leave-from-class (在渲染函数或 JSX 中可以写为：leaveFromClass)

enter-class 已经被重命名为 enter-from-class (在渲染函数或 JSX 中可以写为：enterFromClass)

按键修饰符

不再支持使用数字作为 v-on 修饰符  不再支持config.keycodes

<!-- Vue 3 在 v-on 上使用按键修饰符 -->
<input v-on:keyup.page-down="nextPage">
<input v-on:keypress.q="quit">