Talk about vue2 0 and vue3 What's the difference

Posted by egroeg41 on Mon, 03 Jan 2022 03:10:53 +0100

Structural part

  1. Program main entry file main js
    • vue2.0
          import Vue from 'vue'
          import App from './App.vue'
          import router from "./router"
          import store from "./store"
          new Vue({
              render: h => h(App),
    • vue3.0 - exposed createApp method
          import { createApp } from 'vue';
          import App from './App.vue'

Component syntax (vue3.0 is mainly aimed at api optimization, and vue3.0 is compatible with vue2.0)

vue3.0 uses the composite api. The place of use is in the setup callback function. This callback function is executed before the component is created. Since the component instance is not created when the setup is executed, there is no this in the setup option. This means that you will not be able to access any properties declared in the component - local state, calculated properties, or methods - except props.

  1. Data response
    ref:ref creates a responsive reference to our value. The concept of using references will be used frequently throughout the composite API.
    Parsing in the template will be automatically untied and used directly. (<p>{{msg}}<p>); But it must be (msg.value) in js

    reactive: responsive transformation is "deep" -- it affects all nested properties. In the implementation based on ES2015 Proxy, the returned proxy is not equal to the original object. It is recommended to use only responsive proxies to avoid relying on the original object
    Assigning a structure to an object will make each attribute of the object lose its responsiveness. All attributes can be wrapped by the toRefs method before es6 deconstruction and assignment
    toRefs: each attribute of the object has a responsive attribute and has a ref attribute; Different access methods. You can deconstruct the response expression whose assignment does not affect the data

    readonly: sometimes we want to track changes in a responsive object (ref or reactive), but we also want to prevent it from changing somewhere in the application. For example, when we have a responsive object provide d, we don't want it to be changed during injection. To do this, we can create a read-only Proxy object based on the original object
    ref/reactive/toRefs data differences:



  1. watch usage

    • vue2.0 optional api
         watch: {
            handler(newValue,oldValue) {
            handler(newValue,oldValue) {

    vue3.0 composite api

        setup() {
            let msg = ref("initialization");//string number
            let person = reactive({name:"lisi",age:20})// object array
                console.log(this);//undefined; The arrow function binds the context of the parent scope, so this does not point to the current component
            watch(() => person.age,(newValue,oldValue) => {
            return {
  2. computed use

         //No parameters
            filterMsg() {
                return this.msg + "999"
            //With parameters
            filterMsg2(number) {
                return function() {
                    return this.msg + number;
            // Custom set method
            filterMsg3: {
                get() {
                    return this.msg + "999"
                set(value) {
    • vue3.0
        //No parameters
         const filterMsg =computed( () => msg.value + "fdfasdf")
         //With parameters
         const filterMsg2 =computed(() => {
             return function(num) {
                 return msg.value + num
         // Custom set method and get method
        const count = ref(1)
        const plusOne = computed({
            get: () => count.value + 1,
            set: val => {
                count.value = val - 1
        plusOne.value = 1
        console.log(count.value) // 0

Communication between components

Before understanding component communication, we should first deeply understand setup, render method, this,.


  1. props

    It indicates the props value of the current component passed in by the component. It is responsive. When a new prop is passed in, it will be updated and changes can be monitored through watch.

    be careful:

     But because props It's reactive. You can't use it ES6 Deconstruction, because it will eliminate prop Responsiveness.
     We can pass toRefs Method can deconstruct the assignment without affecting the response of the attribute
        import { toRefs } from 'vue'
        setup(props) {
            const { title } = toRefs(props)
  2. Context context

    The second parameter passed to the setup function is context. Context is a common JavaScript object that exposes the properties of three components:

        // MyBook.vue
        export default {
            setup(props, { attrs, slots, emit }) {

Render function h

 setup() {
        const num = ref(100);//Add wrapper reference object
        const person = reactive({name:"lisi",age:20});//Itself is a responsive object
        const person2 = toRefs(person);//Add a wrapper reference to each attribute of the object
        return () => h("div", [num.value,,person2.age.value])

Topics: Front-end Vue.js