Vue3【组合式API、setup、响应式原理、ref对象解包、模板的语法、v-bind】

文章目录

- 组合式API
- setup
- 响应式原理
- ref对象解包
- 模板的语法
- v-bind

组合式API

在组合式api中直接声明的变量，就是一个普通的变量，不是响应式属性
修改这些属性时，不会在视图中产生效果
可以通过 reactive()来创建一个响应式的对象
在setup()中可以通过返回值来指定那些内容要暴露给外部
暴露后的内容，可以在模板中直接使用

<script>
import { reactive } from "vue"export default {setup() {// 定义变量// 在组合式api中直接声明的变量，就是一个普通的变量，不是响应式属性//      修改这些属性时，不会在视图中产生效果let msg = "今天天气真不错!"let count = 0//可以通过 reactive()来创建一个响应式的对象const stu = reactive({name: "孙悟空",age: 18,gender: "男"})function changeAge(){stu.age = 44}// 在setup()中可以通过返回值来指定那些内容要暴露给外部// 暴露后的内容，可以在模板中直接使用return {msg,count,stu,changeAge}}
}
</script>
<template><h1>演示组合式API</h1><h2>{{ msg }}</h2><h3>{{ count }}</h3><button @click="changeAge">点我一下</button><h2>{{ stu.name }} -- {{ stu.age }} -- {{ stu.gender }}</h2>
</template>

setup

在script标签中加上setup，就说明要使用组合式API

<script setup>
//默认暴露了
import { reactive } from "vue"const msg = "我爱Vue"
const count = 0
const stu = reactive({name: "孙悟空"
})function fn() {alert("哈哈哈，好快乐！")
}
</script>
<template><h1 @click="fn">组合式的API</h1><h2>{{ msg }} -- {{ count }}</h2><h3>{{ stu.name }}</h3>
</template>

响应式原理

reactive()

返回一个对象的响应式代理
返回的是一个深层响应式对象
也可以使用shallowReactive()创建一个浅层响应式对象
缺点：
- 只能返回对象的响应式代理！不能处理原始值

ref()

接收一个任意值，并返回它的响应式代理
ref在生成响应式代理时，它是将值包装为了一个对象 0 --> {value:0}
访问ref对象时，必须通过对象.value 来访问其中的值
在模板template中，ref对象会被自动解包，不用通过.value来访问
vue给我们提供了一个语法糖，使得ref对象在script标签中也可以自动解包
$是一个实验性的，需要在vite插件(vite.config.js)中做一些配置 reactivityTransform:true.即在这里修改

plugins: [vue({eactivityTransform:true
})],

<script setup>
import { reactive, ref } from "vue"
import { $ref } from "vue/macros"
/* reactive()- 返回一个对象的响应式代理- 返回的是一个深层响应式对象- 也可以使用shallowReactive()创建一个浅层响应式对象- 缺点：- 只能返回对象的响应式代理！不能处理原始值ref()- 接收一个任意值，并返回它的响应式代理*/
const stu = reactive({name: "孙悟空"
})// ref在生成响应式代理时，它是将值包装为了一个对象 0  --> {value:0}
// 访问ref对象时，必须通过 对象.value 来访问其中的值
// 在模板template中，ref对象会被自动解包，不用通过.value来访问
let count = $ref(0) // 生成一个0的响应式代理// count = 10 // 改变量只会影响到变量自己，在js中，无法实现对一个变量的代理
console.log(count)// vue给我们提供了一个语法糖，使得ref对象在script标签中也可以自动解包
// $是一个实验性的，需要在vite插件(vite.config.js)中做一些配置 reactivityTransform:true
// 即在这里修改  plugins: [vue({
//     reactivityTransform:true
//   })],
function fn() {// count自增count++
}
</script>
<template><h1>组合式的API</h1><h2 @click="fn">{{ count }}</h2>
</template>

ref对象解包

<script setup>
import { ref, reactive, computed } from "vue"const msg = ref("Hello Vue")// {value: obj}
// obj.value.name
// 一般用这种方式，而不是下面的obj2
const obj = ref({name: "孙悟空",age: 18
})// obj2.name.value
const obj2 = {//此时obj2对象不是响应式的name: ref("孙悟空"), // {value:"孙悟空"}age: ref(18) // // {value:18}
}const { name, age } = obj2 //对obj2对象解构，此时就是顶层对象了，直接在模板解析name即可，不用加valueconst changeMsgHandler = () => {// 修改ref对象时，必须通过value。语法糖暂未正式用，但也可以用// msg.value = "哈哈"name.value = "你看我变不变"
}// computed 用来生成计算属性
const newMsg = computed(() => {return msg.value + "-我爱Vue！"
})
</script><template><!-- ref对象在模板中可以自动解包（要求ref对象必须是顶层对象） --><h1>{{ msg }}</h1><h1>{{ newMsg }}</h1><h2>{{ obj.name }}</h2><!-- name不是顶层响应式对象，所以不能自动解包 --><!-- <h2>{{ obj2.name.value }}</h2> --><h2>{{ name }}</h2><hr /><h2>{{ obj.age + 1 }}</h2><!-- <h2>{{ obj2.age.value + 1 }}</h2> --><h2>{{ age + 1 }}</h2><button @click="changeMsgHandler">点我一下</button>
</template>

模板的语法

在模板中，可以直接访问到组件中声明的变量
- 除了组件中的变量外，vue也为我们提供了一些全局对象可以访问：
  比如：Date、Math、RegExp …
  除此之外，也可以通过app对象来向vue中添加一些全局变量
  在main.js中添加app.config.globalProperties
- 使用插值(双大括号)，只能使用表达式
  表达式，就是有返回值的语句
- 插值实际上就是在修改元素的textContent，
  如果内容中含有标签，标签会被转义显示，不会作为标签生效
指令：
- 指令模板中为标签设置的一些特殊属性，它可以用来设置标签如何显示内容
- 指令使用v-开头
  v-text 将表达式的值作为元素的textContent插入，作用同{{}}
  使用指令时，不需要通过{{}}来指定表达式
  v-html 将表达式的值作为元素的innerHTML插入，有xss攻击的风险

<script setup>
const msg = "我爱vue"
const html = `<h2>我是一段html代码</h2>`const fn = () => {console.log("哈哈哈")
}
</script><template><!-- - 在模板中，可以直接访问到组件中声明的变量- 除了组件中的变量外，vue也为我们提供了一些全局对象可以访问：比如：Date、Math、RegExp ...除此之外，也可以通过app对象来向vue中添加一些全局变量在main.js中添加app.config.globalProperties- 使用插值(双大括号)，只能使用表达式表达式，就是有返回值的语句- 插值实际上就是在修改元素的textContent，如果内容中含有标签，标签会被转义显示，不会作为标签生效指令：- 指令模板中为标签设置的一些特殊属性，它可以用来设置标签如何显示内容- 指令使用v-开头v-text 将表达式的值作为元素的textContent插入，作用同{{}}使用指令时，不需要通过{{}}来指定表达式v-html 将表达式的值作为元素的innerHTML插入，有xss攻击的风险--><h1>{{ "hello" + "world" }}</h1><!-- <h2>{{ if(1+1==2){console.log(123)} }}</h2> --><div>{{ html }}</div><div v-text="html"></div><div v-html="html"></div>
</template>

v-bind

当我们需要为标签动态的设置属性时，需要使用v-bind指令,
- v-bind可以简写为 :
当我们为一个布尔值设置属性时，
- 如果值为true，则元素上有该属性（转换后为true，也算true）
- 如果值为false，则元素没有该属性（转换后为false，也算false）
- 特殊情况：“” 空串，在这里会被当成真值

动态参数
同样在指令参数上也可以使用一个 JavaScript 表达式，需要包含在一对方括号内：

<!--
注意，参数表达式有一些约束，
参见下面“动态参数值的限制”与“动态参数语法的限制”章节的解释
-->
<a v-bind:[attributeName]="url"> ... </a><!-- 简写 -->
<a :[attributeName]="url"> ... </a>

这里的 attributeName 会作为一个 JavaScript 表达式被动态执行，计算得到的值会被用作最终的参数。举例来说，如果你的组件实例有一个数据属性 attributeName，其值为 "href"，那么这个绑定就等价于 v-bind:href。

<script setup>
import { ref } from "vue"
const imgPath = ref("/images/messi.png")
const changeImg = () => {imgPath.value = "/images/neymar.png"
}
const attrs = {id: "box1",class: "hello"
}const attrName = "title"
const attrValue = "这是一个title属性"const isDisabled = ""
</script><template><!-- 当我们需要为标签动态的设置属性时，需要使用v-bind指令,v-bind可以简写为 :当我们为一个布尔值设置属性时，如果值为true，则元素上有该属性（转换后为true，也算true）如果值为false，则元素没有该属性（转换后为false，也算false）特殊情况："" 空串，在这里会被当成真值--><!-- <button @click="changeImg">切换图片</button> --><img :[attrName]="attrValue" :src="imgPath" alt="梅西" /><div :="attrs"></div>  <!--等价于 <div id="box1" class="hello"></div> --><input type="text" :disabled="isDisabled" />
</template>