Vue2与Vue3区别与新增

一、main.js

vue2

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");

vue3

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'


createApp(App).use(store).use(router).use(Vant).mount('#app')

1. vue2引入的是Vue构造函数，然后通过new创建vue实例对象
2. vue3引入的是createApp工厂函数，创建实例对象
3. vue2通过$mount挂载实例对象，vue3通过mount挂载实例对象

二、组件template

vue2要求必须只能有一个div，vue3可以有多个div

三、setup

1. 为什么？

当组件变的很大的时候，我们要关注的东西很多，这样维护困难，所以使用setup，每一个setup只关注某一个逻辑点

2.执行时机和参数

• props解析完成之后，组件创建(bdforeCreate)之前，执行setup
• setup中不能使用this，组件实例还未创建
• ref(基本数据类型响应化)和reactive(引用数据类型相应化)

vue3底层，把对象都变成了Proxy实例对象，对于基本数据类型就是按照Object.defineProperty里面的get和set进行数据劫持然后进行响应式，但是如果是对象类型的话，是用到的Proxy，但是vue3把它封装在新函数reactive里，就相当于，ref中是对象，自动会调用reactive。

• 接收2个参数
  • 1. props:不能使用 ES6 解构，它会消除 prop 的响应性,应使用toRef代替

import { toRef } from 'vue'
setup(props) {
  const title = toRef(props, 'title')
  console.log(title.value)
}

• 1. context

export default {
  setup(props, context) {
    // Attribute (非响应式对象，等同于 $attrs)
    console.log(context.attrs)

    // 插槽 (非响应式对象，等同于 $slots)
    console.log(context.slots)

    // 触发事件 (方法，等同于 $emit)
    console.log(context.emit)

    // 暴露公共 property (函数)
    console.log(context.expose)
  }
}

• 在生命周期钩子前面加上 “on” 来访问组件的生命周期钩子，这些函数接受一个回调函数，当钩子被组件调用时将会被执行:

• 

   

  setup中调用生命周期钩子

  
  两个新的钩子函数：
• onRenderTracked：检查哪个 Reactive 对象属性或一个 ref 作为依赖被追踪。当 Render 函数被调用时，会检查哪个响应式数据被收集依赖。
• onRenderTriggered：当执行 Update 操作时，会检查哪个响应式数据导致组件重新渲染。
• setup中组件自动注册，无需手动注册

3. 父子组件传值

defineProps 用来接收父组件传来的 props ; defineEmits 用来声明触发的事件。

//父组件
<template>
 <my-son foo="🚀🚀🚀🚀🚀🚀" @childClick="childClick" />
</template>

<script lang="ts" setup>
import MySon from "./MySon.vue";

let childClick = (e: any):void => {
 console.log('from son：',e);  //🚀🚀🚀🚀🚀🚀
};
</script>


//子组件
<template>
 <span @click="sonToFather">信息:{{ props.foo }}</span>
</template>

<script lang="ts" setup>
import { defineEmits, defineProps} from "vue";

const emit = defineEmits(["childClick"]);     // 声明触发事件 childClick
const props = defineProps({ foo: String });   // 获取props

const sonToFather = () =>{
   emit('childClick' , props.foo)
}
</script>

4.子defineExpose暴露数据+父ref获取子暴露的数据

• setup 相当于是一个闭包，数据只是默认 return 给 template 使用，不会暴露到组件外，所以父组件是无法直接通过挂载 ref 变量获取子组件的数据。
• 如果要调用子组件的数据，需要先在子组件显示的暴露出来，才能够正确的拿到，这个操作，就是由 defineExpose 来完成。

子组件

<template>
  <span>{{state.name}}</span>
</template>

<script setup>
  import { reactive, toRefs } from 'vue'
  // defineExpose无需引入
  // import { defineExpose, reactive, toRefs } from 'vue'

  // 声明state
  const state = reactive({
    name: 'Jerry'
  }) 
    
  // 将方法、变量暴露给父组件使用，父组件才可通过ref API拿到子组件暴露的数据
  defineExpose({
    // 解构state
    ...toRefs(state),
    // 声明方法
    changeName () {
      state.name = 'Tom'
    }
  })
</script>

父组件

<template>
  <child ref='childRef'/>  
</template>

<script setup>
  import { ref, nextTick } from 'vue'
  // 引入子组件
  import child from './child.vue'

  // 子组件ref
  const childRef = ref('childRef')
  
  // nextTick
  nextTick(() => {
    // 获取子组件name
    console.log(childRef.value.name)
    // 执行子组件方法
    childRef.value.changeName()
  })
</script>

5. 使用路由信息useRoute()和useRouter()

<script setup>
  import { useRoute, useRouter } from 'vue-router'
    
  // 必须先声明调用
  const route = useRoute()
  const router = useRouter()
    
  // 路由信息
  console.log(route.query)

  // 路由跳转
  router.push('/newPage')
</script>

6. 使用vuex:useStore(key)

<script setup>
  import { useStore } from 'vuex'
  import { key } from '../store/index'

  // 必须先声明调用
  const store = useStore(key)
    
  // 获取Vuex的state
  store.state.xxx

  // 触发mutations的方法
  store.commit('fnName')

  // 触发actions的方法
  store.dispatch('fnName')

  // 获取Getters
  store.getters.xxx
</script>

7.CSS变量注入

<template>
  <span>Jerry</span>  
</template>

<script setup>
  import { reactive } from 'vue'

  const state = reactive({
    color: 'red'
  })
</script>
  
<style scoped>
  span {
    // 使用v-bind绑定state中的变量
    color: v-bind('state.color');
  }  
</style>

三、Vue3响应式原理

1. Vue2响应式原理：

通过Object.defineProperty的get，set来进行数据劫持，修改，从而响应式,但是它有什么缺点呢😶

• 由于只有get()、set() 方式，所以只能捕获到属性读取和修改操作，当 新增、删除属性时，捕获不到，导致界面也不会更新。
• 直接通过下标修改数组，界面也不会自动更新。

2. vue3中的响应式，我们用到的Proxy和Reflect

• 通过Proxy（代理）: 拦截对象中任意属性的变化, 包括：属性值的读写、属性的添加、属性的删除等。
• 通过Reflect（反射）: 对源对象的属性进行操作。

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

作者：又一只前端小猪
链接：https://www.jianshu.com/p/04df8896950b