Install and create

1. Install node.js

Please download and install from the official website: https://nodejs.org/zh-cn/

Enter the command node -v

The version number can be displayed, indicating that node has been installed

Enter the command `npm -v

The version number can be displayed, indicating that npm can be used

2. Configure the default installation directory and cache log directory

Note: The environment configuration here mainly configures the path of the global module installed by npm, and the path of the cache cache. The reason for this configuration is that it will be executed in the future like: npm install express [-g] (the optional parameters that follow -g, g represents the meaning of global global installation), the installed modules will be installed in the [C:\Users\username\AppData\Roaming\npm] path, occupying the C disk space.

2.1 Create default installation directory and cache log directory

For example, if I want to put the full module path and cache path in the folder where I installed node.js, then create two folders [node_global] under the folder I installed ["D:\Program Files\nodejs]. ] and [node_cache] as the default installation directory and cache log directory respectively.

2.2 Execute the command

Configure npm's global module directory and cache directory to the two directories we just created:

npm config set prefix "D:\Program Files\nodejs\node_global"
npm config set cache "D:\Program Files\nodejs\node_cache"

npm config get prefix

View npm global installation package save path npm config get cache View npm package cache path

You can also enter the npm list -global command to view the global installation directory

2.node.js environment configuration

1. Create a new [NODE_PATH] under [System Variables], where the third-party dependency package installation directory is set. If the global installation directory is modified following step 2, enter [D:\Program Files\nodejs\node_global\node_modules ]

2. [Path] under [System Variables] add the path of node [D:\Program Files\nodejs\]

3. If the global installation directory is set, [Path] under [user variable] will change the default APPData/Roaming\npm under drive C to [d:\program files\nodejs\node\u global], [d:\program files\nodejs\node\u cache], this is the default module call Path of nodejs

4. Configure Taobao mirror

 npm install -g cnpm --registry=https://registry.npm.taobao.org`

Enter the command cnpm -v to display the version number, indicating that cnpm has been installed

switch mirror command

npm config set registry http://registry.npm.taobao.org/

View Taobao Mirror

npm get registry

View vue version

 npm list vue -g

3. Install vue-cli scaffolding

Query the cli scaffolding of vue

vue -V

refer to (41 messages) Vue vscode creates a vue project process [super detailed] blog of a falling meteor - CSDN blog vscode creates a vue project

4. Create a vue3 project

1.vue-cli

vue-cli Version in 3.5.0 above
vue create title

2.Vite

npm init vite-app title
cd
npm i
npm run dev

1.setup

vue3.x is recommended for use in vue-cli

Add a HelloVue3.vue file and add the following code:

<template>
  <section>
    <div>
      <p>
        setup()Ordinary variables returned directly in functions can be used in template syntax, but they are bound on a single line.
      </p>
      <p>{{ text }}</p>
      <input type="text" v-model="text" />
    </div>
  </section>
</template>
​
<script>
export default {
  setup() {
    let text = "Hello Vue3.x";
     function sayHi(){
        alert("text is "+ ${text})
     }
    // At the end of setup, there must be a return to return an object to expose the properties of the object.
    //Return method 1, the return object can be used directly in the template
    return { text ,sayHi};
    //Return method 2. Return to the rendering function
    //return ()=>h('h1',1)
  },
};
</script>
​
<style>
</style>

Vue3.x recommends using the setup() method to expose properties inside the method to the outside, and then use the template syntax in the DOM to directly use the exposed properties.

At this time, the directly exposed text variable can be used in the template, but its value cannot be changed using v-model.

Because of the directly exposed property, it is a non-responsive variable (modify the value of the text, the label will not re-render the new value).

1.1 Execution timing of setup()

The setup() function is executed once before beforeCreated

So you cannot use this to access the current vue object in setup(). is undefined

1.2 Parameters of setup()

props: object

context: context object
a t t r s , attrs, attrs,slots,$emit:

1.3 Do not mix with vue2 configuration

1. Properties and methods of inverted setup can be accessed in Vue2 configuration
2. But the configuration of Vue2 cannot be accessed in setup
3. If the name is the same, the setup takes precedence

tips: setup cannot be an async function, because it returns promise and cannot be used in templates

2.ref function

The ref function is used to wrap a basic data type, process it into a reference object RefImpl (reference implement refers to the implementation object), and then obtain a responsive object.

The object wrapped by ref, we need to use .value in setup to modify or access its value. In the template, you can get its value directly by using {{exposed object name}}.

ref can also wrap reference data types, but you still need to use .value to access reference data types

After obtaining the wrapper object, finally remember to expose it.

<template>
  <div>
    <p>Name:{{name}}</p>
    <p>age:{{age}}</p>
    <button @click="sayHi">Click 1</button>
     <button @click="sayDay">Click 2</button>
  </div>
</template>
​
<script>
import { ref } from "vue";
​
export default {
  setup() {
    let name = ref("MOAN");
    let age = ref(21);
​
    let obj = ref({
      type:"I love VUE",
      days:"100 year"
    })
    function sayHi() {
      console.log(ref(name));
      name.value="lili"
      console.log(ref(name));
    }
     function sayDay() {
      console.log(ref(obj));
      console.log(obj.value);
      obj.value.type="learn today ref"
    }
      //exposed
    return {
      name,
      age,
      sayHi,
      obj,
      sayDay
    };
  },
};
</script>
​
<style>
</style>
​

ref handles the underlying data type

The underlying logic is basically the same as the data proxy principle in vue2. Data proxy and data hijacking are implemented through the get and set methods of Object.defineProerty.

Shang Silicon Valley Vue2.0+Vue3.0 full set of tutorials vuejs from entry to reliable in BiliBili

ref handles reference data types such as objects, and uses reactive internally to convert data into proxy objects Proxy

vue's responsive simple principle implementation

// Responsive in vue2
    //source data
    let person={
        name:"MAON",
        AGE:21
    }
    let p = {}
    Object.defineProperty(p,"name",{
        configurable:true,//can be modified
        enumerable:true,//can be enumerated
        get(){
            return person.name
        },
        set(value){
            console.log("data has changed");
            person.name=value
        }
    })

    // Responsive in vue3
    const p = new Proxy(person,{
        get(target,propName){
            console.log(`p on the body ${propName} been read`);
            return Reflect.get(target,propName)
          //  return target[propName]
        },
        set(target,propName,value){
            console.log(`p on the body ${propName} has been modified`);
          //  target[propName] = value
            Reflect.set(target,propName,value)
        },
        deleteProperty(target,propName){
            console.log(`p on the body ${propName} was deleted`);
            return Reflect.deleteProperty(target,propName)
            // return delete   target[propName]
        }
    })

You can watch this video, it's very clear Shang Silicon Valley Vue2.0+Vue3.0 full set of tutorials vuejs from entry to profit

3.reactive function

• Unlike ref, reactive is used to encapsulate a reference data type.
• Do not use reactive encapsulation of basic data types, warnings will be reported and responses will be delayed.
• reactive actually wraps the original object into a proxy object Proxy, and operating the proxy object will modify the value of the original object.
• It is not recommended to operate the original object to complete the responsive effect, and there will be a BUG in response delay.
• reactive is the secondary encapsulation of ref. You do not need to use .value in the code, you can directly access the proxy object.
• reactive Do not copy and change the source array directly, you can change it by push

<template>
    <div>
      <p>name: <input v-model="people.name"> {{people.name}}</p>
      <p>age:{{people.age}}</p>
  </div>
</template>
​
<script>
​
import {reactive} from "vue"
​
export default {
    setup() {
        // reactive doesn't need to use .value to get the value
        // Do not use reactive to encapsulate basic data types, the response will be delayed and a warning error will be reported
        // reactive is the secondary encapsulation of ref
        // reactive is equivalent to wrapping a proxy object to modify the value of the original object. Do not try to modify the original object, it will cause strange errors.
        let obj = {name: "MOAN",age:21}
        let people = reactive(obj); 
​
        setInterval(()=> {
            people.age ++;
            console.log("obj.age = ",obj.age);
        },1000)
​
        return {people}
    }
​
}
</script>
​
<style>
​
</style>

4.toRef function

• toRef is used to wrap a property in a reactive object (usually an object wrapped with reactive).
• The wrapped object maintains a responsive link to the source object.
• Can be used to expose certain properties of a reactive object instead of exposing the entire object.
• toRef can also generate a reactive object if a property of the object does not exist.

<template>
  <div>
      <h1>toRef</h1>
      <p>name: <input v-model="name"> {{name}}</p>
      <p>School: <input v-model="school"> {{people.school}}</p>
      <p>name: <input v-model="people.name"> {{people.name}}</p>
      <p>age:{{age}}</p>
  </div>
</template>
​
<script>
​
import {reactive,toRef,ref} from "vue";
export default {
    components: {
        ToRefSub
    },
    setup() {
        let people = reactive({name: "MOAN",age:21});
        // toRef responsively wraps a property of a responsive object
        // In fact, it is to wrap a single property by calling ref()
        let name = toRef(people,"name");
        let age = toRef(people,"age");
        // people does not have a school property, toRef will also create a response object, and operate the properties that the object does not have
        let school = toRef(people,"school");
        setInterval(() => {
            age.value ++;
            // console.log(age.value);
        }, 1000);
​
        // If the properties of the responsive object are exposed directly like {name: people.name}, there will be a BUG of response delay
        return {name,age,people,school}
    }
}
</script>
​
<style>
​
</style>

5.toRefs function

• toRefs is used to convert a reactive object to a normal object.
• All properties of this normal object, pointing to all reactive properties of the source reactive object (ie all properties of the new object are actually reactive as well).
• Usually structure results are used.

<template>
  <div>
      <h1>toRefs</h1>
      <p>name: <input v-model="name"> {{name}}</p>
      <p>age:{{age}}</p>
  </div>
</template>
<script>
import {reactive,toRefs} from "vue";
export default {
    setup() {
        // 
        let people = reactive({name: "MOAN",age:21});

        // toRefs converts a responsive object into an ordinary object, and all the properties of the ordinary object point to all the responsive properties of the source responsive object.
        // let people2 = toRefs(people);
        // let name = people2.name;
        // let age = people2.age;

        // Usually used for destructuring
        let {name,age} = toRefs(people);
        return {name,age}
        
        //return ...toRefs(people)
    }
}
</script>
<style>
</style>

Reprint: Welcome to reprint, but this statement must be retained without the consent of the author;

If you have any questions, you can "kick" me in the comments