vue3.x相关对比及应用整理

最新推荐文章于 2024-04-27 03:18:37 发布

desireY

最新推荐文章于 2024-04-27 03:18:37 发布

阅读量259

点赞数 1

文章标签： vue.js typescript

本文链接：https://blog.csdn.net/tt_167126/article/details/115243053

版权

话不多说直奔主题...

Vue3.x新特性

1. 数据响应重新实现（ES6的proxy代替Es5的Object.defineProperty）

2. 源码使用ts重写，更好的类型推导

3. 虚拟DOM新算法（更快，更小）

4. 提供了composition api，为更好的逻辑复用与代码组织

5. 自定义渲染器（app、小程序、游戏开发）

6. Fragment，模板可以有多个根元素

vue3.x与vue2.x的区别

一、默认进行懒观察

在 2.x 版本里，不管数据多大，都会在一开始就为其创建观察者。当数据很大时，这可能会在页面载入时造成明显的性能压力。3.x 版本，只会对「被用于渲染初始可见部分的数据」创建观察者，而且 3.x 的观察者更高效。

二、更精准的变更通知。
　　举栗子：2.x 版本中，使用 Vue.set 来给对象新增一个属性时，这个对象的所有 watcher 都会重新运行；3.x 版本中，只有依赖那个属性的 watcher 才会重新运行。

三、3.0 新加入了 TypeScript 以及 PWA 的支持

四、使用上的变化

1.Data

2.x时代

export default {
  data(){
    return{

    }
  }
},
------------------------------
3.x取而代之是使用以下的方式去初始化数据:
<template>
  <div class="hello">
    123
  </div>
  <div>{{ name.name }}</div>
</template>


import { reactive } from 'vue' 
export default {
 setup(){
   const name = reactive({
     name:'hello vue3.0'
   })
   return {name}
 }  
}

tips: 在3.x中setup等效于之前2.0版本当中beforeCreate和created，是在组件初始化的时候执行，甚至是比created更早执行。值得注意的是,在3.0当中如果你要想使用setup里的数据，你需要将用到值return出来，返回出来的值在模板当中都是可以使用的。
假如你不return出来，而直接去使用的话浏览器是会提醒你：

这也是3.0当中需要注意的地方。文中在模板里放入2个子节点,其实这个在2.0里是不被允许的,这也是3.0的一项小的改变，reactive是3.0提供的一个数据响应的方式，它主要是对对象进行数据响应。
2.Method

  <div class="hello">
    <div>{{name.name}}</div>
    <div>{{count}}</div>
    <button @click="increase">增加</button>
  </div>
  
</template>

<script>
import { reactive, ref } from 'vue'
export default {
 setup(){
   const name = reactive({
     name:'崔'
   })
   const count=ref(0)
   const increase =()=>{
     count.value++
   }
   return { name, count, increase }
 }  
}

在上述代码中，引用了vue提供的ref新函数，它的作用是用来创建一个引用值，它主要是对String,Number,Boolean的数据响应作引用。也许有人会问，为什么不直接给count赋值，而是采用ref(0)这样的方式来创建呢，我的理解是，如果直接给count赋值就是等于把这个值直接抛出去了，就很难在找到它，而采用ref这种方法等于在向外抛出去值的是同时，还在它身上牵了一根绳子，方便去追踪它。
需要注意的时，在ref的函数中，如何你要去改变或者去引用它的值，ref的这个方法提供了一个value的返回值，对值进行操作。

3. LifeCycle(Hooks) 3.0当中的生命周期与2.0的生命周期出现了很大的不同，如下

　　beforeCreate -> setup()

　　created -> setup()

　　beforeMount -> onBeforeMount

　　mounted -> onMounted

　　beforeUpdate -> onBeforeUpdate

　　updated -> onUpdated

　　beforeDestroy -> onBeforeUnmount

　　destroyed -> onUnmounted

　　errorCaptured -> onErrorCaptured

如果要想在页面中使用生命周期函数，根据以往2.0的操作是直接在页面中写入生命周期，而现在是需要去引用的，这就是为什么3.0能够将代码压缩到更低的原因。

import {reactive, ref, onMounted} from 'vue'
export default {
 setup(){
 const name = reactive({ name:'崔' })
 const count = ref(0)
 const increase = () => { count.value++ }
 onMounted(() => { console.log('123') })
 return { name, count, increase}
 } 

4.computed

<template>
 <div class="hello">
 <div>计算属性{{computeCount}}</div>
 </div>
</template>
<script>
import {reactive, ref, onMounted, computed} from 'vue'
export default {
 setup(){
 const count = ref(1)
 const computeCount = computed(() => count.value * 10) // 使用computed记得需要引入
 return { computeCount }
 }
}
</script>

提下Vue3.x中watch

// 侦听一个getter
const state = reactive({ count: 0 })
watch(
  () => state.count,
  (count, prevCount) => {
    /* ... */
  }
)

具体：https://www.jianshu.com/p/c257aad46344

5.组件上的区别

在2.0当中，哪个页面需要使用组件就在哪个页面里引入该组件，同时在页面注册这个组件。在传递参数时，父组件传递参数给子组件，子组件就会接收父组件传递过来的参数。举个栗子：

父组件

<template>
  <div id="app">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  components: {
    HelloWorld
  }
}
</script>

子组件
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  props: {
    msg: String
  }
}
</script>
以上是最常见的父子组件之间的调用，但是在vue3.0中就存在差异。
父组件：

<template>
 <div class="hello">
 <div>123</div>
 <NewComp :name="name" @childClick="parentClick"/>
 </div>
</template>
<script>
import { reactive } from 'vue'
import NewComp from '@components/newComp.vue'
export default {
 components:{
 NewComp
 },
 setup(){
 const name = reactive({ name:'hello vue3.0' })
 const parentClick = (text) => { console.log(text) }
 return {name, parentClick}
 } 
}
</script>
子组件：

<template>
 <div>
 <button @click="handleClick">组件</button>
 </div>
</template>
<script>
export default {
 setup(props, {emit}){
 const handleClick = () => { emit('childClick','hello') }
 return { handleClick } 
 }
}
</script>

嵌套多层/深层组件传值，可采用高阶插件/组件库中provide/inject，只能在setup函数内使用，如下

父组件

import { provide } from "@vue/composition-api";

setup() {
// provide('数据名称', 要传递的数据)
provide("provideVal", "我是父组件向子组件传递的值");
}

子组件

import { inject } from "@vue/composition-api";

setup() {
//调用 inject 函数，通过指定的数据名称，获取到父级共享的数据
const provideVal = inject("provideVal");
return {
provideVal
};
}

通过上面的vue3.0父子组件之间的调用,不难发现父组件当中在调用子组件时，基本与2.0相同，而在子组件当中,要想获取到父组件传递过来的参数,我们是直接在setup()中直接获取到props值和emit事件。这是因为setup提供了props以及context这两个属性，而在context中又包含了emit等事件。
为什么不用this.$emit的方法来向外触发子组件事件，因为在3.0当中已经不在使用this关键词。

五、响应原理对比

Vue2.x

1.vue2使用Object.defineProperty方法实现响应式数据

　　2.缺点：

　　　　无法检测到对象属性的动态添加和删除

　　　　无法检测到数组的下标和length属性的变更

　　3.解决方案：

　　　　vue2提供Vue.$set动态给对象添加属性

　　　　Vue.$delete动态删除对象属性

　　　　重写数组的方法，检测数组变更

Vue3.x

1.vue3使用proxy实现响应式数据