View 3
Create a Vue3.0 project
View your own vue/cli version, create it with Vue/cli
- cmd, vue -V, must be above version 4.5.0
- vue create project name
- Create a Vue3 project
create with vite
- A new generation of front-end build tools
- In the development environment, no packaging is required, and it can be quickly cold-started
- Lightweight and fast Hot Reload (HMR)
- true on-demand compilation
start creating
- npm init vite-app project name
- cd project name
- asl and
- npm run dev
View Vue3.0 project
In vue.config.js, turn off syntax checking,
- To prevent the compiler from reporting errors, debugging is troublesome, remember to restart
const {
defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave:false//关闭语法检查
})
main.js explanation
- vue2
// vue2中，借助render，传入h，h就是外壳app
new Vue({
render: (h) => h(App)
}).$mount('#app')
- In vue3, by referencing createApp, you can call it directly without passing new
import {
createApp } from 'vue'
import App from './App.vue'
- Create an application instance object
const app = createApp(App)
- mount
app.mount("#app")
- uninstall
app.unmount("#app")
app.vue explanation
The template structure in the VUE3 component can have no root tag and
no error will be reported in VUE2
Commonly used Composition API (combined)
1. Kick off the setup
- A new configuration item in vue3. value is a function
- In vue3, the data and methods used in the component must be configured in the setup
- In vue2, the configuration data is in data, and the configuration method is in methods.
- setup two return values
- 1. If an object is returned, the properties and methods in the object can be used directly in the template
- 2. If a rendering function is returned, customize the rendering content
return object
<template>
<!-- VUE3组件中的模板结构可以没有根标签 -->
<h1>我是{
{
name}},我{
{
age}}</h1>
<button @click="sayword">点我</button>
</template>
<script>
export default {
name: 'App',
setup(){
let name ="乞力马扎罗"
let age =18
function sayword(){
console.log(`你好${
name},我${
age}`)
}
return{
name,
age,
sayword
}
},
}
</script>
<style>
</style>
return render function
<template>
<!-- VUE3组件中的模板结构可以没有根标签 -->
<h1>我是{
{
name}},我{
{
age}}</h1>
<button @click="sayword">点我</button>
</template>
<script>
import {
h} from "vue"
export default {
name: 'App',
setup(){
let name ="乞力马扎罗"
let age =18
function sayword(){
console.log(`你好${
name},我${
age}`)
}
return ()=>h('button','看我强制替换你')
},
}
</script>
<style>
</style>
Precautions,
- Vue2 and vue3 can be mixed, but I don't mind. It is OK to call the data in the setup in vue2, but the setup of vue3 calls vue2 and it will report an error.
- If the name is the same, setup takes precedence
- setup cannot be an async function
2, ref function
- ref is not an attribute, it has to be imported
- Use no .value in the template, when it is found that it is a ref object, it will automatically .value
- Created a reference object (referred to as the ref object) that contains the response
- When modifying variables, it is through .value
- When modifying the object, in vue3, the Proxy is encapsulated into the ractive function
import {
ref} from "vue"
- First print the value after ref, what it looks like!
setup() {
let name =ref("乞力马扎罗");
let age = ref(18);
function sayword() {
console.log(name,age);
}
return {
name,
age,
sayword,
};
},
1, his instance is RefImpl
- Represents reference (reference) implement (implementation)
- Also called an instance of a reference implementation, called a reference object
2. Go one floor inward and see the value
- set and get are placed inside the prototype
3. Therefore, you must use .value to modify variables
setup() {
let name =ref("乞力马扎罗");
let age = ref(18);
function sayword() {
name.value="罗曼蒂克"
age.value=42
console.log(name,age);
}
return {
name,
age,
sayword,
};
},
4. When modifying the object
- The object itself is reflmpl, which turns the incoming object into a Proxy proxy object
- When modifying, one value can update all the inside, no need for two values
<template>
<h1>我是{
{
name }},我{
{
age }}</h1>
<h1>我是{
{
job.type }},我{
{
job.salus}}</h1>
<button @click="sayword">点我更新信息</button>
</template>
<script>
import {
ref} from "vue"
export default {
name: "App",
setup() {
let name =ref("乞力马扎罗");
let age = ref(18);
let job = ref({
type:"前端",
salus:"30k"
});
function sayword() {
name.value="罗曼蒂克"
age.value=42
job.value.type="后端"
console.log(name,age);
}
return {
name,
age,
job,
sayword,
};
},
};
</script>
<style>
</style>
3. reactive function
- Through this object, there is no need to update the value.
- Role, define an object type of responsive data, (basically similar to using ref)
- Grammar, const proxy object = reactive (source object), receive an object or array, return a proxy object (Proxy object)
- The reactive data defined by reactive is "deep"
- The internal is actually based on the ES6 Proxy implementation, and the internal data of the source object is manipulated through the proxy object.
<script>
import {
reactive, ref} from "vue"
export default {
name: "App",
setup() {
let name =ref("乞力马扎罗");
let age = ref(18);
let job = reactive({
type:"前端",
salus:"30k"
});
function sayword() {
name.value="罗曼蒂克"
age.value=42
job.type="后端"
}
return {
name,
age,
job,
sayword,
};
},
};
</script>
modify array
<template>
<!-- VUE3组件中的模板结构可以没有根标签 -->
<h1>我是{
{
name }},我{
{
age }}</h1>
<h1>我是{
{
job.type }},我{
{
job.salus}}</h1>
<h1>我是{
{
list[0] }}</h1>
<button @click="sayword">点我更新信息</button>
</template>
<script>
import {
reactive, ref} from "vue"
export default {
name: "App",
setup() {
let name =ref("乞力马扎罗");
let age = ref(18);
let job = reactive({
type:"前端",
salus:"30k"
});
let list = reactive([1,2,3]);
function sayword() {
name.value="罗曼蒂克"
age.value=42
list[0]=4
job.type="后端"
}
return {
name,
age,
job,
list,
sayword,
};
},
};
</script>
<style>
</style>
Optimized reactive
<template>
<h1>我是{
{
person.name }},我{
{
person.age }}</h1>
<h1>我是{
{
person.job.type }},我{
{
person.job.salus }}</h1>
<h1>我是{
{
person.list[0] }}</h1>
<button @click="sayword">点我更新信息</button>
</template>
<script>
import {
reactive, ref } from "vue";
export default {
name: "App",
setup() {
let person = reactive({
name: "乞力马扎罗",
age: 18,
job: {
type: "前端",
salus: "30k",
},
list: [9],
});
function sayword() {
console.log(person)
person.name='罗曼蒂克'
person.list[0]='罗曼蒂克'
}
return {
person,
sayword,
};
},
};
</script>
<style>
</style>
4. reactive vs. ref
from the point of view of definition
- ref is used to define basic data types
- reactive is used to define, object (or array) type data
- Of course, ref can also define objects or data types, but it will automatically convert to proxy objects through reactive internally
From a principle point of view:
- ref passes Object. defineProperty () get and set to achieve responsive (data hijacking)
- reactive implements responsiveness (data hijacking) by using Proxy in es6, and manipulates the data inside the source object through reflect
From the point of view of use
- The data defined by ref requires .value to operate the data. When reading the data, it is directly read in the template without .value
- The data defined by reactive, the operation data and the read data do not need .value