学习笔记-响应式ref| 青训营笔记

这是我参与「第四届青训营」笔记创作活动的的第1天

vite创建Vue3项目

npm 7+用以下指令

npm init vite@latest my-vue-app -- --template vue

安装依赖

npm install

运行

npm run dev

Vue3 声明全局变量

<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>

Vue3，添加setup，在导入组件后，可以不用注册，直接使用；在script标签里声明的变量不需要导出，可以顺利在template中使用响应式数据，改了msg数据，页面中自动变换出来 App.vue代码如下：


 template>

    <h1>{{msg}}</h1>

    <h1>{{revseMsg(msg)}}</h1>

    <button @click="setMsg">修改</button>

  <img alt="Vue logo" src="./assets/logo.png" />

  <HelloWorld msg="Hello Vue 3 + Vite" />

</template>
<script setup>
import HelloWorld from './components/HelloWorld.vue'
let msg = "hello";
function revseMsg(value){
  return value.split('').reverse().join('')//字符串字母分开、反转、合并
}
function setMsg(){
  msg="no face";
    console.log(msg);
}
</script>

响应式ref

导入一个{ref}方法


import {ref} from "vue";

msg的值通过ref来创建


let msg = ref("hello");

msg对应的字符串对象是响应式的，msg.value修改这个值可以触发响应式的修改，点击修改按钮后“hello”会变成“你真棒”

代码如下：


 <template>

    <h1>{{msg}}</h1>

    <h1>{{revseMsg(msg)}}</h1>

    <button @click="setMsg">修改</button>

  <img alt="Vue logo" src="./assets/logo.png" />

  <HelloWorld msg="Hello Vue 3 + Vite" />

</template>

 

<script setup>

import HelloWorld from './components/HelloWorld.vue'

import {ref} from "vue";

let msg = ref("hello");

 

function revseMsg(value){

  return value.split('').reverse().join('')

}

 

function setMsg(){

  msg.value = "你真棒！";

}

</script>

响应式可以监听数据的变换，当数据发生改变，即value发生改变会触发，页面视图的更新

总结

在Vue3中可以通过ref对字符串、数字、布尔等基本数据类型进行响应式的转变，如果是对象，响应式转变用reactive