vue3与vue2的区别

原创已于 2022-08-14 20:21:28 修改 · 1.7k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js

于 2022-08-14 17:46:39 首次发布

vue3 专栏收录该内容

1 篇文章

订阅专栏

1webpack和vite：

vue2使用webpack形式去构建项目
webpack是一开始是入口文件，然后分析路由，然后模块，最后进行打包，然后告诉你，服务器准备好可以工作了
vue3使用vite构建项目
先告诉你服务器准备完成了，然后等你发送http请求。然后是入口文件。Dynaminc import（动态导入） code split point（代码分割）
最大好处和区别就是为了让项目中的一些代码文件多了以后去保存更新数据时更快到看的效果。也就是所谓的热更新

2main.js文件

vue2中我们尝使用pototype（原型）的形式去进行操作，引入的是构造函数
vue3需要我使用的形式进行操作，引入的是工厂函数

3setup函数

setup函数必须return出去

<script>
 export default {
  name: 'appName',
  setup(){
  //变量
   let name = '打工仔'
   let age = 18
   //方法
   function say(){
    console.log(`我只是一个${name},今年${age}岁`)
   }
   // 当一个函数返回对象时候
   return {
    name,
    age,
    say
   }
  }
 }
</script>

此时会发现${name}中到name不需要使用this去进行操作，this的作用只不过是取的某个作用域到变量而已。二setup函数提高了一个当前就在这个作用域中。
setup语法中课接收2个参数setup(props,context)

props：值为对象，包含：组件外部传递过来，且组件内部声明接收了属性

context：上下文对象

attrs：值得对象，包含：组件外部传递过来，但是在props中声明，相当于this.$attrs
slots:收到插槽的内容，相当于$slots
emit: 分发自定义事件的函数，相当于this.$emit

4指令和插槽

vue2中使用slot可以直接使用solt，而vue3中必须使用v-slot的形式
v-for与v-if在vue2中一起使用优先级最高的是v-for指令，而且不建议一起使用
vue3中v-for与v-if。只会把当前v-if当做v-for中的一个判断句，不会相互冲突
vue3中移除了keycode作为v-on的修饰符，当然也不支持config.keycode
vue3中移除了v-on.native修饰符
vue3中移除了过滤器。

自定义指令
比如防抖v-debounce

<template>
  <button v-debounce="{fn: handleClick, event: 'click', delay: 200}">点击试试</button>
</template>
// 指令
app.directive('debounce', {
mounted(el, binding) {
/ 至少需要回调函数以及监听事件类型
  if (typeof binding.value.fn !== 'function' || !binding.value.event) return;
  let delay = 200; // 默认延迟时间
  el.timer = null;
  el.handler = function() {
  if (el.timer) {
      clearTimeout(el.timer);
      el.timer = null;
   };
    el.timer = setTimeout(() => {
        binding.value.fn.apply(this, arguments)
        el.timer = null;
      }, binding.value.delay || delay);
  },
  el.addEventListener(binding.value.event, el.handler)
},
 // 元素卸载前也记得清理定时器并且移除监听事件
   beforeMount(el, binding) {
    if (el.timer) {
      clearTimeout(el.timer);
      el.timer = null;
    }
    el.removeEventListener(binding.value.event, el.handler)
  }
})

5ref和reactive

ref

作用：定义一个响应式数据
语法：const xxx = ref(initVlaue)
js中操作数据：xxx.value
模板读取数据：不需要.value。直接：{{xxx}}
注意：
接受数据类型：基本类型、也可以是对象类型
基本类型的数据：响应式依然依靠Object.defineProperty的get和set完成
对象类型的数据：内部求助了vue3的新函数reactive

reactive

作用：定义一个对象类型的响应式数据
语法：const obj = reactive(被代理的obj）接受一个对象或者数组，返回一个代理对象（proxy对象）
reactive定义的响应式数据是‘深层次的’
内部基于ES6的Proxy，通过代理对象作为源对象内部数据进行操作

ref	reactive
ref定义的是基本数据类型（ref也可以代理数组或者对象，只不过内部会自动通过reactive转化为代理对象）	reactive定义的是对象或者数组类型
ref 通过Object.defineProperty()的get和set实现数据劫持	reactive通过Proxy来实现数据劫持，并且通过Reflect操作源对象内部的数据
ref操作数据.value读取时不需要.value	reactive操作和读取数据都不需要.value

6vue3的响应式原理

vue2的响应式原理用Object.defineProterty的get和set进行数据劫持。从而实现响应式

vue2中的get和set方法去进行属性的读取和修改操作。当我们进行增删改查操作时候，页面不会实时更新
直接通过下标改数组，页面也不会实时更新

vue3中响应式原理使用Proxy进行代理，使用window内置对象Reflect反射

proxy可以拦截对象中任意的属性变化，当然包括读写，添加，删除等
Reflect对源对象属性进行操作

const p =new Proxy(data,{
// 读取属性时候调用
get（）{
    return Refletc.get(target,propName)
   }
// 修改属性或者添加属性时调用
 set（target,propName,value）{
 return Reflect.set(target,propName,value)
 }
 // 删除属性时候调用
 deleteProperty（target,propName）{
 return Reflect.deleteProperty(target,propName)
 }
})

7computed和watch与watchEffct区别

computed
vue3和vue2的computed的配置功能一致
watch

与vue2的watch配置一样
vue3中的watch对比vue2有两个差异
监视 reactive定义的响应式数据时(比如整个对象或者数组)，oldvalue无法正确获取，强制开启了深度监听（deep配置无效）
监视reactive定义的响应式数据的某一个属性时候，deep配置有效

watchEffect

watch是：既要指明监视属性，也要指明监视的回调。
watchEffect有点像computed：
1.computed注重返回过来的值
2.而watchEffect更注重的是过程（回调函数的函数体），所以不用写返回值
watchEffect的优势
默认开启immediate：true
需要哪个就监听哪个
值发生改变就调用一次，且不需要返回值

8生命周期

vue2中我们是通过new Vue在执行beforeCreate与created。vue3中式先准备好在执行
区别： beforeCreated与create并没有组合api中，setup相当于这两个生命周期的函数

在vue3的setup中与vue2的生命周期对比

vue2	vue3
beforeCreate	not need 使用 setup()
created	not need 使用 setup()
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeDestroy	onBeforeUnmount
destroyed	onUnmounted
errorCaptured	onErrorCaptured

9 hooks函数

Vue3.x中的自定义hook函数是什么？

本质是一个函数，把setup函数中使用的Composition API进行了封装
类似vue2中的mixin

vue3中的hooks其实是函数的写法，就是将文件的一些单独功能的js代码进行抽离出来，放到单独的js文件中。这样其实和我们在vue2中学的mixin比较像

使用Vue3的组合API封装的可复用的功能函数
自定义hook的作用类似于vue2中的mixin技术
自定义Hook的优势: 很清楚复用功能代码的来源, 更清楚易懂

变量来源都是显示传入，解决了来源不明问题，mixin是直接引入

10toRef与toRefs以及他们区别

toRef作用

作用：创建一个ref对象，其value值指向另一个对象中的某个属性值
语法：const name = toRef(person【对象】,‘name’【键名】)
应用：要将响应式的对象中的某个属性单独提供给外包使用
扩展：toRefs与toRefx功能一致。toRefs是批量创建多个ref对象需要注意的是他只会解析对象的第一层属性，语法直接传入对象 toRefs（person）

创建一个ref对象，其value值指向另外一个对象的某个属性，这样在模板就可以直接调用使用属性名二不用加对象名前缀了
语法 const name = toRef(person:‘name’)
应用 toRefs和toRef功能一致，toRefs是批量创建多个ref对象需要注意的是他只会解析对象的第一层属性，语法直接传入对象 toRefs（person）

11 router

setup(){
  const router= useRouter() // 在vue3中使用引入在和vue2那样使用
  const route= useRoute()
  function fn(){
    this.$route.push('/about')
  }
  onMounted(()=>{
    console.log(route.query.code)
  })
  return{
    fn
  }
}

12 `全局Api的转移`

2.x 全局 API（ Vue）	3.x 实例 API(app)
Vue.config.xxx	app.config.xxx
Vue.config.productionTip	移除
Vue.component	app.compontent
Vue.directive	app.directive
Vue.mixin	app.mixin
Vue.use	app.use
Vue.prototype	app.config.globalProperties

vue2是通过Vue.prototype去操作原型，在vue3中只能通过app.config,gloabalProperties

13其他APi

1.shallowReactive与shallowRef

shallowReactive: 只处理对象的最外层属性的响应式（浅响应式）
shallowRef：只处理基本数据类型的响应式，不进行对象的响应式处理

什么时候使用？

如果有一个对象数据，结构比较深，但变化时只是外层属性变化 ===> shallowReactive
如果有一个对象数据，后续功能不会修改对象中的属性，而是生新的对象来替换 ===> shallowRef

2.readonly与shallowReadonly

readonly是接收了一个响应式数据，然后重新赋值，返回的数据就不允许修改，深层只读
shallowReadonly却只是浅层只读（深层数据允许修改）

3.toRaw与markRaw

toRaw

toRaw:就是将一个由reactive生成的响应式对象转为普通对象
使用场景：用于读取响应式对象对应的的普通对象，对于这个普通对象的所有操作，不会引起页面更新
markRaw
作用：标记一个对象，使其永远不会在成为响应式对象
当渲染不可变数据源的大列表是，跳过响应式可以提高性能

4.customRef

创建一个自定义的ref,并对其依赖项跟踪和更新触发进行显示控制
实现防抖效果：

5.provide与inject

作用：实现祖孙组件间的通信
父组件有一个provide选项提供数据，子组件有一个inject选项来开始使用这些数据

14新的组件

1Transition

会在一个元素或组件进入和离开 DOM 时应用动画
它是一个内置组件，这意味着它在任意别的组件中都可以被使用，无需注册。它可以将进入和离开动画应用到通过默认插槽传递给它的元素或组件上。进入或离开可以由以下的条件之一触发：
由 v-if 所触发的切换
由 v-show 所触发的切换
由特殊元素切换的动态组件

2Fragment

在vue2中：组件必须有一个根标签
在vue3中：组件可以没有根标签，内部会将多个标签包含在一个Fragment虚拟元素中
好处：减少标签层级，减少内存占用

3Teleport

Teleport是一种能够将我们组件html结构移动到指定位置的技术（开发的时候非常有用）

  <teleport to="body"> //定位到body  </teleport>

4Suspense

<template>
  <div class="app">
    <h3>我是父组件</h3>
    <Suspense>
      <template v-slot:default>
        <ChildVue></ChildVue>
      </template>

      <template v-slot:fallback>
        <h3>稍等，加载中....</h3>
      </template>
    </Suspense>
  </div>
</template>

v-slot:default 表示默认的输出组件
v-slot:fallback 表示如果页面加载的慢了，会优先展示这个内容，有点像刷新页面的时候数据回来的慢了，就加载一会儿
等待异步组件时渲染一些后备内容，获得更好的用户体验

15 解决没有this + 各种api的方法

在Vue2项目中可以使用this.$router.push等方法进行路由的跳转，但是在Vue3的setup函数里，并没有this这个概念，因此如何使用路由方法

import { useRouter, useRoute} from "vue-router";
//使用
setup() {
    //初始化路由
    const router = useRouter();
    router.push({
        path: "/"
    });
    
    return {};
}

在vue2中可以通过this来访问到$refs，vue3中由于没有this所以获取不到了，但是官网中提供了方法来获取:

<template>
  <h2 ref="root">姓名</h2>
</template>
<script>
    //使用setup的注意事项
    import { onMounted, ref } from 'vue'
    export default {
        name: 'test',
        setup(){
            const root  = ref(null)
            onMounted(()=>{
                console.log(root.value);
            })
            return {
                root
            }
        },
    }
</script>
第二种方法
  setup(){)
            const {proxy} = getCurrentInstance()
            onMounted(()=>{
                console.log(proxy.$refs.root); 相当于this.$refs.root
            })
            return {
            }
        },