vue3.0的变化汇总

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中去
  https://blog.csdn.net/qq_42365082/article/details/122460981

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
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

• 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 新增异步模板

异步组件声明方法的改变：
1.Vue 3.x 新增一个辅助函数defineAsyncComponent，
2.用来显示声明异步组件;异步组件高级声明方法中的 component 选项更名为loader；
3.loader绑定的组件加载函数不再接收resolve和reject参数，而且必须返回一个Promise；

v2 
const asyncPage = () => import('./NextPage.vue')
components: {
    mDeal: resolve => require(['./mods/deal'], resolve),
  },
  
v3：
const AsyncFoo = defineAsyncComponent(() => import("./demo.vue"))
const asyncPageWithOptions = defineAsyncComponent({
  loader: () => import('./NextPage.vue'),
  delay: 200,
  timeout: 3000,
  error: ErrorComponent,
  loadingComponent: LoadingComponent
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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
1
2
3
4
5
6
7
8

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

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

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

export default {
    props: ['text'],
    emits: ['accepted']
  }
1
2
3
4

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

EventBus 的缺点就是 Vuex 的优点，缺乏 状态管理 。试想一下我们在看一段代码时，看到 $emit(‘someEvent’) 或 $on(‘someEvent’)后想要知道它分别在哪里被监听，在哪里被触发，然后全局一搜竟然有几十处

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

template>
  
...
  
...
  

1
2
3
4
5

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有关的东西
})
1
2
3
4
5
6
7
8
9
10
11

13.组件注入 provide inject

只能在setup中使用

父组件
import { provide } from 'vue'
let site = ref("zhoulujun.cn")
provide('site',site)

子组件
import { inject } from 'vue'
const site = inject('site')
  
}
1
2
3
4
5
6
7
8
9
10
11
12

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

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

错误的
/

1
2

15.key的改变

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

16.keyup不再支持数字

1
2
3
4
5

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

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

17.各种生命周期
生命周期在setup中使用

beforeCreate===>setup()
created=======>setup()
beforeMount ===>onBeforeMount：注册一个钩子，在组件被挂载之前被调用。这个钩子在服务器端渲染期间不会被调用。
mounted=======>onMounted：注册一个回调函数，在组件挂载完成后执行。这个钩子在服务器端渲染期间不会被调用。
beforeUpdate===>onBeforeUpdate：注册一个钩子，在组件即将因为响应式状态变更而更新其 DOM 树之前调用。这个钩子在服务器端渲染期间不会被调用。
updated =======>onUpdated：注册一个回调函数，在组件因为响应式状态变更而更新其 DOM 树之后调用。这个钩子在服务器端渲染期间不会被调用。注意：不要在此钩子中更改组件的状态（可以在onErrorCaptured中进行更改），这可能会导致无限的更新循环！
beforeUnmount ==>onBeforeUnmount：注册一个钩子，在组件实例被卸载之前调用。这个钩子在服务器端渲染期间不会被调用。
unmounted =====>onUnmounted：注册一个回调函数，在组件实例被卸载之后调用。这个钩子在服务器端渲染期间不会被调用。
errorCaptured ==>onErrorCaptured：注册一个钩子。
renderTracked ==>onRenderTracked
renderTriggered =>onRenderTriggered
serverPrefetch =>onServerPrefetch
activated =====>onActivated：这个钩子在服务器端渲染期间不会被调用。
deactivated ===>onDeactivated：这个钩子在服务器端渲染期间不会被调用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

18.watch props emit

• warch
• props
• emit
  写法也是有点不一样的