Learn VUE together from scratch (15) Get to know VUE3 for the first time

Create a Vue3.0 project

To use, vue cliyou need to ensure that the version of vue is above 4.5
Use vitecreate - a new generation of front-end construction tools

In the development environment, no packaging operation is required, and quick cold start is possible
Lightweight and fast hot reload HMR
True on-demand compilation, no longer waiting for the entire application to be compiled

step

create projectnpm init vite-app <project-name>
Enter the project directorycd <project-name>
install dependenciesnpm install
runnpm run dev

Analyzing Engineering Structures

VUE2.0	VUE3.0	Remark
import View from 'view'	import {createApp} from ‘vue’	The introduction is no longer a vue constructor, but a factory function named createApp
const vm = new Vue({ render:h=>h(App)}) vm.$mount(“#app”)	const app = createApp(App) app.mount(“#app”)#mount app.unmount(“#app”)#uninstall	Create an application instance object, app is similar to vm, but app is lighter than vm
data:{ }, methods:{}	setup(){ let name = ‘111’ let age = ‘222’ function hello(){ console.log(name,age)}}	The data and methods used in the components are all configured in the setup

Common functions

setup function

setup is the performance stage of all composition APIs and is a function
The data methods used in the component, etc. must be configured in the setup
Two return values of the setup function:
- If an object is returned, the properties and methods in the object can be used directly in the template
- If you return a rendering function, you can customize the rendering content

important point:
- The properties and methods in the setup can be accessed in vue2, but the configuration of vue2 cannot be accessed in the setup
- If there is a duplicate name, setup takes precedence
- setup cannot be an async function, because the return value is no longer a return object, but a promise, and the template cannot see the properties in the return object.

ref function

The value of ref used in the template does not need to be obtained through value, vue will automatically add .value to the value of ref
The value of ref used in js must be obtained using .value
Role: define a responsive data structure

grammar:const xxx = ref(initValue)

Create a reference object containing reactive data
Operate data in js:xxx.value

import {ref} from 'vue'
export default {
  setup(){
    let name = ref('张三')
    let age = ref(12)
    let job = ref({
      type:"前端",
      salary:'5k'
    })
    function changeInfo(){
      name.value = '李四'
      age.value = 18
      job.value.type = '初级前端工程师'
      job.value.salary = '7k'
    }
    return {
      name,
      age,
      job,
      changeInfo
    }
  }
}

vue3Ref function

reactive function

Role: Define an object type of responsive data
Syntax: const 代理对象 = reactive(源对象)Receive an object (or array), return a proxy object (proxy object)
The responsive data type defined by reactive is deep
The internal ES6-based Proxy implementation operates on the internal data of the source object through the proxy object

Contrast with ref

From the perspective of defining data:
- ref is used to define basic data types, and reactive is used to define data of object or array type
- ref can also be used to define object type data, which will be converted to a proxy object internally through reactive
From the perspective of principle comparison:
- ref implements responsiveness (data hijacking) through the get and set of Object.defineProperty()
- reactive implements responsiveness (data hijacking) by using Proxy, and manipulates the data inside the source object through Reflect
From a usage point of view:
- Data defined by ref: .value is required to operate the data, and .value is not required for direct reading in the template when reading data
- The data defined by reactive does not require .value when manipulating or reading data.

Two points of attention for setup

Timing of setup execution: Execute once before beforeCreate, this is undefined
The parameters of setup:
- props: the value is an object, including: the properties passed from outside the component and received by the internal declaration of the component
- context context object
  - attrs: The value is an object, including attributes passed from outside the component, but not declared in the props configuration, which is equivalent to this.$attrs
  - slots: received slot content, equivalent to this.$slots
  - emit: A function that distributes custom events, equivalent to this.$emit

Computed properties and monitoring

computed function

Consistent with the computed configuration function in vue2

// 简写
let person =reactive( {
      firstName:'lin',
      lastName:'linlin'
    })
    person.fullName = computed(()=>{
      return person.firstName + person.lastName
    })
// 完整
    person.fullName = computed({
      get(){
        return person.firstName +"-"+person.lastName
      },
      set(value){
        const nameArr = value.split('-')
        person.firstName = nameArr[0]
        person.lastName = nameArr[1]
      }
      
    })

watch function

When monitoring the responsive data defined by reactive, the oldValue cannot be obtained correctly, the deep monitoring is forced to be enabled, and the deep configuration fails
When monitoring a certain attribute in the reactive data defined by reactive, the deep configuration is valid

Listen to the responsive data defined by ref

    watch(sum,(newValue,oldValue)=>{
      console.log(newValue,oldValue);
    },({immediate:true}))

Monitor multiple responsive data defined by ref

    watch([sum,msg],(newValue,oldValue)=>{
      console.log(newValue,oldValue);
    },({immediate:true}))

Monitor all the attributes of a responsive data defined by reactive. OldValue cannot be obtained correctly here, and deep monitoring is forced to be turned on. The deep configuration is invalid.

    watch(person,(newValue,oldValue)=>{
      console.log(newValue,oldValue);
    },({immediate:true}))

Monitor an attribute in a responsive data defined by reactive

    watch(()=>person.name,(newValue,oldValue)=>{
      console.log(newValue,oldValue);
    },({immediate:true}))

Monitor certain attributes in a responsive data defined by reactive

    watch([()=>person.name,()=>person.age],(newValue,oldValue)=>{
      console.log(newValue,oldValue);
    },({immediate:true}))

Special case

    watch(()=>person.name,(newValue,oldValue)=>{
      console.log(newValue,oldValue);
    },({immediate:true}))

When monitoring an attribute in an object defined by reactive, the deep configuration is valid

watchEffect function

Compared with watch, there is no need to specify which attribute needs to be monitored, which attribute is used in the monitoring callback, and which attribute will be monitored. watchEffect focuses on the process and has no return value