首先我们需要搭建一个V3项目
我们可以使用
vue-cli
webpack
vite来快速搭建我们的项目，我们这里使用vite搭建项目
在cmd中
npm i -g create-vite-app
这样我们可以使用新的命令来搭建我们的项目了
在文件夹中继续cmd
create-vite-app myDomeName
我这里的名字是myVue3ViteDome0523，因为是提前搭建好的，就没有截图了。
进入到我们的项目文件夹
cd myVue3ViteDome0523
npm i //下载项目启动所需要的初始依赖
然后运行项目的时候我们有时候npm run serve//有时候npm run dev
我们自己来看一下package.json就一目了然了
{
"name": "myVue3ViteDome0523",
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vite build"
},
"dependencies": {
"vue": "^3.0.4"
},
"devDependencies": {
"vite": "^1.0.0-rc.13",
"@vue/compiler-sfc": "^3.0.4"
}
}
这是一个json文件，我们可以看scripts所对应的value，里面是项目的启动命令和打包命令，所有我们要启动项目直接
npm run dev
默认运行在了3000端口
http://localhost:3000/
我们直接对我们的跟组件下手来学习基本语法。
Vue2相比Vue2来讲，data就是存放变量的，methods就是存放方法的，并且data中的每个数据都会被监听并且添加getter、setter方法，虽然这样感觉起来很好，但是一单我们的项目大了，就很难梳理，很不利于我们的维护。
在Vue3中，组合Api就解决了这个问题，当然不止这么问题。
话不多说，干代码
我们需要先了解一个比beforecreate还早的生命周期。setup,我们知道在created中才有我们的this、data、methods，显然在setup中肯定是没有他们的，这个时候我们怎么创建变量在页面上使用呢。
ref
引入
import {
ref} from "vue";
这个时候我们直接使用这个方法创建一个响应数据。
<template>
<div>
<p>{
{
refDate01}}</p>
</div>
</template>
<script>
import {
ref } from "vue";
export default {
name: "App",
setup() {
let refDate01 = ref('我是使用ref创建的数据，我是一个字符串')
return{
refDate01}
},
};
</script>
这个时候页面上上也显示了我们的refDate01
我们可以发现我们在setup中创建的响应式数据只有在setup中return暴露出去才能在我们的视图层使用。
我们想要改变这个refDate01 这个变量，这个时候我们可以写一个点击事件来改变它，
<template>
<div>
<p >{
{
refDate01}}</p>
<button @click="changeRefDate01">我是改变refDate01数据的按钮</button>
</div>
</template>
<script>
import {
ref } from "vue";
export default {
name: "App",
setup() {
let refDate01 = ref('我是使用ref创建的数据，我是一个字符串')
function changeRefDate01() {
refDate01 = '我是改变后的数据'
}
return{
refDate01,changeRefDate01}
},
};
</script>
我们会发现当点击按钮的时候页面并没有发生变化，我们在点击的时候打印一下我们的refDate01 ，看一下它的结构
可以很清晰的看到，我们的数据放在了使用ref创建的对象key值为value的上面，
这个时候我们改一下我们的代码
<template>
<div>
<p>{
{
refDate01 }}</p>
<button @click="changeRefDate01">我是改变refDate01数据的按钮</button>
</div>
</template>
<script>
import {
ref } from "vue";
export default {
name: "App",
setup() {
let refDate01 = ref("我是使用ref创建的数据，我是一个字符串");
function changeRefDate01() {
refDate01.value = "我是改变后的数据";
}
return {
refDate01, changeRefDate01 };
},
};
</script>
页面发生了变化，我们可以总结一下，在使用ref方法创建响应数据的时候他会将我们的值放到value上
我们尝试使用ref创建一个响应对象
{ {refDate02.name}}
{ {refDate02.age}}
显然没有问题，我们再尝试改变
<template>
<div>
<p>{
{
refDate02.name}}</p>
<p>{
{
refDate02.age}}</p>
<button @click="changeFun">我是按钮，点我</button>
</div>
</template>
<script>
import {
ref } from "vue";
export default {
name: "App",
setup() {
let refDate02 = ref({
name:"zjq",age:18})
function changeFun() {
refDate02.value.name = 'newName'
refDate02.value.age = 1888
}
return {
refDate02,changeFun};
},
};
</script>
显然是没有问题的，我们可以清晰的看到ref的特点，创建的时候都会到创建对象的value属性上获取我们的自己的数据首先要做的就是.value，还有要注意的就是我们再setup创建的变量、方法想在视图层使用都需要我们return出去才能正常使用，
今天我们就说着一个知识点。加油~明天讲解下一个知识点。
下面将代码换种写法：
<template>
<div>
<p>{
{
refDate02.name }}</p>
<p>{
{
refDate02.age }}</p>
<button @click="changeFun">我是按钮，点我</button>
</div>
</template>
<script>
import {
ref } from "vue";
export default {
name: "App",
setup() {
let {
refDate02, changeFun } = changeObjFun();
return {
refDate02, changeFun };
},
};
function changeObjFun() {
let refDate02 = ref({
name: "zjq", age: 18 });
function changeFun() {
refDate02.value.name = "newName";
refDate02.value.age = 1888;
}
return {
refDate02, changeFun };
}
</script>
