What is the difference between the syntax of vue3 and vue2

The syntax difference between vue3 and vue2: 1. vue2 uses webpack to build the project, while vue3 uses vite to build the project; 2. vue2 can use the pototype form to operate, and the constructor is introduced , and vue3 needs to use the form of structure to operate, and the factory function is introduced.

The operating environment of this tutorial: Windows 10 system, Vue3 version, Dell G3 computer.

What is the difference between the syntax of vue3 and vue2

1.webpack and vite

vue2 uses the webpack form. Building the project

Webpack starts with the entry file, then analyzes the route, then the module, and finally packages it, and then tells you that the server is ready to start.

vue3 uses vite to build the project

First tell you that the server is ready, then wait for you to send an HTTP request, then the entry file, Dynamic import (dynamic import) code split point (code splitting)

The biggest benefit and difference is In order to allow you to see the actual effect more quickly when you save updated data in the future when there are more code files in the project, it is the so-called (hot update)

2.main.js file

In vue2, we can use the form of prototype (prototype) to operate. What is introduced is the constructor.

In vue3, we need to use the form of structure to operate. What is introduced is Factory function

The app component in vue3 can have no root tag

3.setup function

The setup function must return Return out

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

You will find that the name in the current ${name} does not need to be operated with this. The function of this is just to get the variable in a certain scope, and the setup function provides the current Only in this scope

is very uncomfortable at this time. Doesn’t it mean that every variable and method I define needs to be returned? Vue3 provides us with

on the script tag. Add a setup such as: 5101c0cdbdc49998c642c71f6b6410a82cacc6d41bbb37262a98f745aa00fbf0, which is equivalent to being placed in the setup when compiling and running.

Note: setup is earlier than beforeCreate and created life cycle, that is to say, use this directly at the moment To get the data in data, it is still undefined

The setup syntax lesson receives 2 parameters setup(props,context)

We all know this.$attrs, this.$slots in vue2 ,this.$emit is equivalent to attrs, slots, and emit in context

Note: When we only accept one parameter, the page will prompt a warning, but it does not affect the use

4. Instructions and slots

You can use slot directly in vue2, but in vue3 you must use v-slot form

v-for and v-if In vue2, the v-for instruction has the highest priority, and it is not recommended to use v-for and v-if in vue3 together. The current v-if will only be regarded as a judgment statement in v-for. , will not conflict with each other

Remove keyCode as a modifier of v-on in vue3, and of course do not support config.keyCodes

Remove v-on.native modifier in vue3

Remove the filter filter in vue3

5.ref and reactiveref

Change the data For responsive data, ref turns them into objects. If we directly operate the code, it cannot be modified. You will find that the current name and age still modify the page through get and set. At this time, you need to use .value, and ref is still Refimpl

<template>
  <div class="home">
    <h1>姓名：{{name}}</h1>
    <h1>年龄：{{age}}</h1>
    <button @click="say">修改</button>
  </div>
</template>
<script>
import {ref} from &#39;vue&#39;
export default {
  name: &#39;Home&#39;,
  setup(){
    let name = ref(&#39;中介&#39;)
    let age = ref(18)
    console.log(name)
    console.log(age)
    //方法
    function say(){
      name=&#39;波妞&#39;
      age=18
    }
    return {
      name,
      age,
      say
    }
  }
}
</script>

In this case, we don’t have to display {{name.value}} on the page. In fact, we don’t need to do this. In our vue3, we will detect that your ref is an object and automatically give it to you. Adding .value, if we define the ref object ourselves, the instance will become refimpl. At this time, use XX.value.XX to modify it

<template>
  <div class="home">
    <h1>姓名：{{name}}</h1>
    <h1>年龄：{{age}}</h1>
    <h2>职业：{{job.occupation}}</h2>
    <h2>薪资：{{job.salary}}</h2>
    <button @click="say">修改</button>
  </div>
</template>
<script>
import {ref} from &#39;vue&#39;
export default {
  name: &#39;Home&#39;,
  setup(){
    let name = ref(&#39;中介&#39;)
    let age = ref(18)
    let job=ref({
      occupation:&#39;程序员&#39;,
      salary:&#39;10k&#39;
    })
    console.log(name)
    console.log(age)
    //方法
    function say(){
      job.value.salary=&#39;12k&#39;
    }
    return {
      name,
      age,
      job,
      say
    }
  }
}
</script>

At this time, we print obj.value, which is no longer refimpl. The object becomes a proxy object, because the bottom layer of vue3 is a proxy object, and the basic data types are hijacked according to get and set in Object.defineProperty. Vue3 has encapsulated reactive, which is equivalent to automatically when we call ref. Call reactive

reactive

We said above that the object in ref will call reactive and convert the Object into Proxy. Now we directly change it into Proxy through reactive, which performs a deep responsiveness

<template>
  <div class="home">
    <h1>姓名：{{name}}</h1>
    <h1>年龄：{{age}}</h1>
    <h2>职业：{{job.occupation}}<br>薪资：{{job.salary}}</h2>
    <h3>爱好：{{hobby[0]}},{{hobby[1]}},{{ hobby[2] }}</h3>
    <button @click="say">修改</button>
  </div>
</template>
<script>
import {ref,reactive} from &#39;vue&#39;
export default {
  name: &#39;Home&#39;,
  setup(){
    let name = ref(&#39;波妞&#39;)
    let age = ref(18)
    let job=reactive({
      occupation:&#39;程序员&#39;,
      salary:&#39;10k&#39;
    })
    let hobby=reactive([&#39;吃饭&#39;,&#39;睡觉&#39;,&#39;打豆豆&#39;])
    console.log(name)
    console.log(age)
    //方法
    function say(){
      job.salary=&#39;12k&#39;
      hobby[0]=&#39;学习&#39;
    }
    return {
      name,
      age,
      job,
      say,
      hobby
    }
  }
}
</script>

At this time, you will definitely feel that there are too many methods. It is better to use the .value provided by ref. Is it cool and refreshing? But there is a problem. If there is a bunch of data, you don’t have to go to .value all the time. , click until it smokes. At this time, you can use the form of simulated data in vue2, and it will feel more fragrant

<template>
  <div class="home">
    <h1>姓名：{{data.name}}</h1>
    <h1>年龄：{{data.age}}</h1>
    <h2>职业：{{data.job.occupation}}<br>薪资：{{data.job.salary}}</h2>
    <h3>爱好：{{data.hobby[0]}},{{data.hobby[1]}},{{ data.hobby[2] }}</h3>
    <button @click="say">修改</button>
  </div>
</template>
<script>
import {reactive} from &#39;vue&#39;
export default {
  name: &#39;Home&#39;,
  setup(){
    let data=reactive({
      name:&#39;波妞&#39;,
      age:18,
      job:{
        occupation:&#39;程序员&#39;,
        salary:&#39;10k&#39;
      },
      hobby:[&#39;吃饭&#39;,&#39;睡觉&#39;,&#39;打豆豆&#39;]
    })
    //方法
    function say(){
      data.job.salary=&#39;12k&#39;
      data.hobby[0]=&#39;学习&#39;
    }
    return {
      data,
      say,
    }
  }
}
</script>

The difference between ref and reactive

ref defines the basic data type

ref implements data hijacking through get and set of Object.defineProperty()

ref operates data.value, which is not needed when reading. value

reactive defines object or array data type

reactive implements data hijacking through Proxy

reactive operation and reading data are not required. value

6.The responsive principle of vue3

The responsive principle of vue2 uses the get and set of Object.defineProperty to perform data hijacking to achieve responsiveness

There are only get and set in vue2 Method to read and modify attributes. When we add or delete, the page will not be updated in real time

直接通过下标改数组，页面也不会实时更新

vue3中响应式原理使用Proxy进行代理，使用window内置对象Reflect反射，学了Es6的语法的就知道我们在使用Proxy进行代理，好比甲方公司给出需要什么技术的前端攻城狮，让乙方去干招聘、面试等环节

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)
}
})

【相关推荐：《vue.js教程》】

The above is the detailed content of What is the difference between the syntax of vue3 and vue2. For more information, please follow other related articles on the PHP Chinese website!