Vue3基础(一)___ref

首先我们需要搭建一个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>