vue2迁移vue3 文档 https://www.javascriptc.com/vue3js/guide/migration/render-function-api.html
1.创建项目

npm init vite-app
cd
npm install
npm run dev

2.setUp()

• 组合api的（解决v2业务逻辑分散的问题）方法可以单独写在外面的js。
  -本质：注入api 注入到option api中去

setup代替beforeCreated 和 created（在他们之间执行） 其他得周期前面加on，当然也是兼容之前vue2得生命周期得
注意 这里没是不能使用 data methods 也支持async await

setup() {
let {conut,changeCount}=AAA();
    return {
     	conut,changeCount
    }
  },
function AAA(){
    // 定义一个变量  ref包裹 才能自动更新
    // ref只能监听简单类型得变化，数组对象不行（reactive）
    let conut = ref(0);
    function changeCount(){
      console.log(conut);
      // 值取value
      conut.value+=1
    }

    return {
      conut,
      changeCount
    }
}

• ref 和reactive 支持响应式变化

ref如何ref(obj.name)将对象得某一个字段设置成响应试，改变后不影响原数据
toRef（obj,"name）

• 递归监听 和 非递归监听

递归监听:ref和 reactive都是支持的，但是数据量比较大的时候非常耗性能（其实是将每层都包装成来一个proxy对象）
非递归监听：只会监听第一层得变化，（数据量比较大得时候使用）
使用shallowReactive代替ef和 reactive
shallowRef创建得数据 监听得是.value得变化
triggerRef 使用 triggerRef(state) 手动得去更新，只适用于shallowRef

• toRow(xxxx) 得到reactive 或者 ref得一个原始数据

注意：
let obj={name:“11”}
let newObj=reactive(obj);
let obj1=toRow(newObj);
obj 和 obj1是一样得 修改之后是不会更新页面得， 更新页面 必须是修改newObj

如果是ref
let obj1=toRow(newObj).value;

• markRaw(obj) 使用后数据不会被追踪 不能实时更新
• toRef

ref ：复制，修改响应式数据，不会影响以前得数据，会自动更新页面
toRef：引用，修改会影响以前得数据，不会自动更新页面

3.defineAsyncComponent 新增异步模板

v2 const asyncPage = () => import('./NextPage.vue')
v3：
const asyncPageWithOptions = defineAsyncComponent({
  loader: () => import('./NextPage.vue'),
  delay: 200,
  timeout: 3000,
  error: ErrorComponent,
  loadingComponent: LoadingComponent
})

4.attribute属性值得变化

v2 属性值false 会被移除
v3 会保留此属性，值为false

5.$attrs 和 $children

v2 $attrs是不包括classv3包括v3移除了$children 不能用此方法访问子组件

6.自定义指令钩子得变化
前者是v2 得， v3跟vue得生命周期对应起来

created - 新的！在元素的 attribute 或事件侦听器应用之前调用。
bind → beforeMount
inserted → mounted
beforeUpdate：新的！这是在元素本身更新之前调用的，很像组件生命周期钩子。
update → 移除！有太多的相似之处要更新，所以这是多余的，请改用 updated。
componentUpdated → updated
beforeUnmount：新的！与组件生命周期钩子类似，它将在卸载元素之前调用。
unbind -> unmounted

7.v-is 自定义元素交互，用得比较少…
8.data选项

v2 data可以是对象 也可以是函数
v3 只接受返回对象得函数

9.组件可以定义发出得事件

export default {
    props: ['text'],
    emits: ['accepted']
  }

10.事件总线得移除 $on $once $once移除

11.vue3支持组件多个根节点

template>
  <header>...</header>
  <main v-bind="$attrs">...</main>
  <footer>...</footer>
</template>

12.常用api得改变
全局 API 现在只能作为 ES 模块构建的命名导出进行访问

Vue.config —— app.config
Vue.mixin —— app.mixin
Vue.use —— app.use
Vue.prototype —— app.config.globalProperties
createApp({}).mount(‘#app’)

nextTick的变化
Vue.nextTick
Vue.observable (用 Vue.reactive 替换)
Vue.version
Vue.compile (仅全构建)
Vue.set (仅兼容构建)
Vue.delete (仅兼容构建

v2
import Vue from 'vue'
Vue.nextTick(() => {
  // 一些和DOM有关的东西
})

v3
import { nextTick } from 'vue'
nextTick(() => {
  // 一些和DOM有关的东西
})

13.组件注入 provide inject

v3可以在入口出 app.provide('guide', 'Vue 3 Guide') 注入
在任何组件内获取
export default {
  inject: {
    book: {
      from: 'guide'
    }
  },
  template: `<div>{{ book }}</div>`
}

14.v-for 和 v-if的变化

v2 v-for 快于 v-if
v3 v-for 慢于 v-if

错误的
<div v-for="item in list"  v-if="item.status">/<div>

15.key的改变

新增：对于 v-if/v-else/v-else-if 的各分支项 key 将不再是必须的，因为现在 Vue 会自动生成唯一的 key。
非兼容：如果你手动提供 key，那么每个分支必须使用唯一的 key。你不能通过故意使用相同的 key 来强制重用分支。
非兼容： 的 key 应该设置在 标签上 (而不是设置在它的子节点上)。

16.keyup不再支持数字

<!-- 不支持 -->
<input v-on:keyup.13="submit" />

<!-- 支持 -->
<input v-on:keyup.enter="submit" />

v-bind 的绑定顺序会影响渲染结果
常见的场景是在一个元素中同时使用 v-bind=“object” 语法和单独的 property。然而，这就引出了关于合并的优先级的问题

v2 property覆盖object
v3 根据他们的绑定前后顺序来决定