创建Vue3.0工程

查看自己的vue/cli版本，使用Vue/cli创建

• cmd,vue -V,要在4.5.0版本以上
• vue create 项目名
• 创建Vue3项目

使用vite创建

• 新一代前端构建工具
• 开发环境下，无需打包，可快速冷启动
• 轻量快速的热重载（HMR）
• 真正的按需编译

开始创建

• npm init vite-app 项目名
• cd 项目名
• npm i
• npm run dev

查看Vue3.0工程

vue.config.js中，关闭语法检查，

• 防止编译器报错，调试麻烦，记得重启

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true,lintOnSave:false//关闭语法检查
})

main.js讲解

• vue2中

// vue2中，借助render，传入h，h就是外壳app
new Vue({render: (h) => h(App)
}).$mount('#app')

• vue3中，通过引用createApp,无需通过new，可以直接调用

import { createApp } from 'vue'
import App from './App.vue'

• 创建应用实例对象

const app = createApp(App)

• 挂载

app.mount("#app")

• 卸载

app.unmount("#app")

app.vue讲解

VUE3组件中的模板结构可以没有根标签
VUE2中没有会报错

常用的Composition API（组合式）

1.拉开序幕的setup

• vue3,中的新的配置项。值是一个函数
• 在vue3中，组件中所用到的数据，方法等，均要配置在setup中
• 在vue2中，配置数据在data,配置方法在methods，
• setup两种返回值
• 1，若返回一个对象，则对象中的属性，方法在模板中均可直接使用
• 2，若返回一个渲染函数，则自定义渲染内容

返回对象

<template><!-- VUE3组件中的模板结构可以没有根标签 --><h1>我是{{name}},我{{age}}</h1><button @click="sayword">点我</button>
</template><script>
export default {name: 'App',setup(){let name ="乞力马扎罗"let age =18function sayword(){console.log(`你好${name},我${age}`)}return{name,age,sayword}},
}
</script><style></style>

返回渲染函数

<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 =18function sayword(){console.log(`你好${name},我${age}`)}return ()=>h('button','看我强制替换你')},
}
</script><style></style>

注意事项，

• vue2和vue3可以混合用，但不介意，vue2中调用setup中数据可以，但vue3的setup调用vue2会报错
• 如果重名，setup优先
• setup不能是async函数

2，ref函数

• ref不是属性，得import引入
• 在模板里面使用不用.value,当发现是ref对象的时候，自动.value了
• 创建了一个包含响应式的引用对象（简称ref对象）
• 修改变量的时候，是通过.value
• 修改对象的时候， vue3中，把Proxy封装到了ractive函数

import {ref} from "vue"

• 先打印一下经过ref后的值，长什么样子！

 setup() {let name =ref("乞力马扎罗"); let age = ref(18);function sayword() {console.log(name,age);}return {name,age,sayword,};},

1，他的实例是RefImpl

• 代表reference（引用） implement（实现）
• 也叫引用实现的实例，叫引用对象

2，向里一层，看value

• set和get被放在原型里面
  

3，所以，修改变量得用.value

 setup() {let name =ref("乞力马扎罗"); let age = ref(18);function sayword() {name.value="罗曼蒂克"age.value=42console.log(name,age);}return {name,age,sayword,};},

4，修改对象的时候

• object本身是reflmpl，把传入的对象变成了Proxy的代理对象
• 修改的时候，一个value即可更新里面所有的，不用两个value

<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=42job.value.type="后端"console.log(name,age);}return {name,age,job,sayword,};},
};
</script><style>
</style>

3，reactive函数

• 通过这个对象就不用.value更新了
• 作用，定义一个对象类型的响应式数据，（基本类似采用ref）
• 语法，const 代理对象 = reactive（源对象），接收一个对象或者数组，返回一个代理对象（Proxy对象）
• reactive定义的响应式数据是“深层次”的
• 内部其实是基于ES6的Proxy实现，通过代理对象操作源对象内部数据进行操作

<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=42job.type="后端"}return {name,age,job,sayword,};},
};
</script>

修改数组

<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=42list[0]=4job.type="后端"}return {name,age,job,list,sayword,};},
};
</script><style>
</style>

优化后的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对比ref

从定义的角度

• ref用来定义 基本数据类型
• reactive用来定义，对象（或数组）类型数据
• 当然，ref也可以定义对象或者数据类型，但他内部会自动通过reactive转为代理对象

从原理角度：

• ref通过Object。defineProperty（）的get和set来实现响应式（数据劫持）
• reactive通过使用es6里的Proxy来实现响应式（数据劫持），并通过reflect操作源对象内部的数据

从使用的角度

• ref定义的数据，操作数据需要.value,读取数据时模板中直接读取，不需要.value
• reactive定义的数据，操作数据与读取数据，均不需要.value