【Vue3+Vite】Vue3视图渲染技术快速学习第二期

文章目录

一、模版语法
- 1.1 插值表达式和文本渲染
- - 1.1.1 插值表达式语法
  - 1.1.2 文本渲染语法
- 1.2 Attribute属性渲染
- 1.3 事件的绑定
二、响应式基础
- 2.1 响应式需求案例
- 2.2 响应式实现关键字ref
- 2.3 响应式实现关键字reactive
- 2.4 扩展响应式关键字toRefs 和 toRef
三、条件和列表渲染
- 3.1 条件渲染
- 3.2 列表渲染
四、双向绑定
五、数据监听器

一、模版语法

Vue 使用一种基于 HTML 的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。
所有的 Vue 模板都是语法层面合法的 HTML，可以被符合规范的浏览器和 HTML 解析器解析。
在底层机制中，Vue 会将模板编译成高度优化的 JavaScript 代码。
结合响应式系统，当应用状态变更时，Vue 能够智能地推导出需要重新渲染的组件的最少数量，并应用最少的 DOM 操作。

1.1 插值表达式和文本渲染

插值表达式:最基本的数据绑定形式是文本插值，它使用的是“Mustache”语法 ,即双大括号{{}}

插值表达式是将数据渲染到元素的指定位置的手段之一
插值表达式不绝对依赖标签,其位置相对自由
插值表达式中支持javascript的运算表达式
插值表达式中也支持函数的调用

1.1.1 插值表达式语法

{{数据名字/函数/对象调用API}}

<script setup>
let msg = "hello";let getMsg = () => {return "hello vue3 message";
};let age = 25;
let nickname = "道格";// 对象调用API
// 模拟购物车：
const carts = [{ name: "可乐", price: 3, number: 10 },{ name: "百事", price: 2, number: 20 }
];
//购物车计算： 总价 = 单价*个数
function compute() {let count = 0;for (const index in carts) {count += carts[index].price * carts[index].number;}return count;
}
</script><template><div>msg: {{msg}}<br />getMsg : {{getMsg()}}<br />age : {{age}}<br />nickname : {{nickname}}<br />购物总价：{{compute()}}<br />表达式写计算购物总价： {{carts[0].price*carts[0].number + carts[1].price * carts[1].number}}</div>
</template><style scoped>
</style>

result

1.1.2 文本渲染语法

为了渲染双标中的文本,我们也可以选择使用v-text和v-html命令

v-*** 这种写法的方式使用的是vue的命令
v-***的命令必须依赖元素,并且要写在元素的开始标签中
v-***指令支持ES6中的字符串模板
插值表达式中支持javascript的运算表达式
插值表达式中也支持函数的调用
v-text可以将数据渲染成双标签中间的文本,但是不识别html元素结构的文本
v-html可以将数据渲染成双标签中间的文本,识别html元素结构的文本

<script setup>
let msg = "hello";let getMsg = () => {return msg + " getMsg";
};let refMsg = "<font color='red'>msg</font>";
let greenMsg = `<font color=\'green\'>${msg}</font>`;
</script><template><div><span v-text="msg"></span><br /><span v-text="getMsg()"></span><br /><span v-text="refMsg"></span><br /><span v-html="refMsg"></span><br /><span v-html="greenMsg"></span></div>
</template><style scoped>
</style>

1.2 Attribute属性渲染

想要渲染一个元素的 attribute，应该使用 v-bind指令

由于插值表达式不能直接放在标签的属性中,所有要渲染元素的属性就应该使用v-bind
v-bind可以用于渲染任何元素的属性,语法为 v-bind:属性名='数据名', 可以简写为 :属性名='数据名'

<script setup>
const data = {name: "道格维克",url: "https://blog.csdn.net/GavinGroves",image: "https://www.runoob.com/wp-content/uploads/2017/01/vue.png"
};
</script><template><div><!--target="_blan" 跳转页面 _self当前页面变化 --><a v-bind:href="data.url" target="_self"><img :src="data.image" :title="data.name" /><br /><input type="button" :value="`点击访问${data.name}`" /></a></div>
</template><style scoped>
</style>

vue

1.3 事件的绑定

v-on 来监听 DOM 事件，并在事件触发时执行对应 Vue的JavaScript代码

用法：v-on:click="handler" 或简写为 @click="handler"
vue中的事件名=原生事件名去掉on 前缀如:onClick --> click
handler的值可以是方法事件处理器,也可以是内联事件处理器
绑定事件时,可以通过一些绑定的修饰符,常见的事件修饰符如下
- .once：只触发一次事件。
- .prevent：阻止默认事件。
- .stop：阻止事件冒泡。
- .capture：使用事件捕获模式而不是冒泡模式。
- .self：只在事件发送者自身触发时才触发事件。

<script setup>
import { ref } from "vue";function fun1() {alert("你好");
}
// 计数器:
let count = ref(0);
function counter() {count.value++;
}function jumpDeterPrevent() {alert("不许访问！");
}function jumpDeter(event) {let isFlag = confirm("确定要访问吗？");if (!isFlag) {event.preventDefault();}
}
</script><template><div><!-- 事件的绑定函数 脸两种写法 --><button v-on:click="fun1">按钮1</button><br /><button @click="fun1">按钮2</button><br /><!-- 内联事件处理器 --><button @click="counter">{{count}}</button><!-- 事件修饰符 once 只能执行一次--><button @click.once="counter">加一次</button>{{count}}<br /><!-- 事件修饰符 prevent 阻止组件的默认行为 --><ahref="https://blog.csdn.net/GavinGroves"target="_blank"@click.prevent="jumpDeterPrevent()">prevent阻止跳转页面</a><br /><!-- 原生js方式阻止组件默认行为 (推荐) --><ahref="https://blog.csdn.net/GavinGroves"target="_blank"@click="jumpDeter($event)">JS原生阻止跳转页面</a></div>
</template>
<style scoped>
</style>

result

二、响应式基础

此处的响应式是指 :

数据模型发生变化时,自动更新DOM树内容,页面上显示的内容会进行同步变化,
vue3的数据模型不是自动响应式的,需要我们做一些特殊的处理

2.1 响应式需求案例

需求：实现 + - 按钮,实现数字加一减一
这个案例中数值是会变的但是页面上不会实时更新
Vue3中需要用vue 提供的ref reactive 关键字

案例参考：
【Vue3 + Vite】Vite搭建项目解构 Vue快速学习第一期

2.2 响应式实现关键字ref

ref 可以将一个基本类型的数据（如字符串，数字等）转换为一个响应式对象。
ref 只能包裹单一元素

    /* 从vue中引入ref方法 */import {ref} from 'vue'let counter = ref(0);

数据变化，视图也会跟着动态更新。
需要注意的是，由于使用了 ref，因此需要在访问该对象时使用 .value 来获取其实际值。

2.3 响应式实现关键字reactive

reactive() 函数创建一个响应式对象或数组：

<script setup>
/* 从vue中引入reactive方法 */
import { ref, reactive } from "vue";let person = reactive({name: "道格",age: "22"
});
/* 函数中要操作reactive处理过的数据,需要通过 对象名.属性名的方式 */
function changeAge() {person.age++;
}function showAge() {alert(person.age);
}
</script><template><div><button @click="changeAge()">{{person.age}}</button><button @click="showAge()">showAge</button></div>
</template><style scoped>
</style>

对比ref和reactive ：

ref 函数适用场景：
- 更适合单个变量
- 需要通过 .value 访问其实际值
reactive函数适用场景：
- 更适合对象
- reactive 可以将一个普通对象转化为响应式对象，这样在数据变化时会自动更新界面，特别适用于处理复杂对象或者数据结构。
- 使用 reactive 可以递归追踪所有响应式对象内部的变化，从而保证界面的自动更新

综上所述:

ref 适用与简单情形下的数据双向绑定，对于只有一个字符等基本类型数据或自定义组件等情况，建议可以使用 ref；
而对于对象、函数等较为复杂的数据结构，以及需要递归监听的属性变化，建议使用 reactive。

2.4 扩展响应式关键字toRefs 和 toRef

toRef函数
将一个reactive响应式对象中的某个属性转换成一个ref响应式对象
每个单独的 ref 都是使用 toRef() 创建的。

toRefs函数：
- 将一个reactive响应式对象中的多个属性转换成多个ref响应式对象

案例：响应显示reactive对象属性

<script type="module" setup>/* 从vue中引入reactive方法 */import {ref,reactive,toRef,toRefs} from 'vue'let data = reactive({counter:0,name:"test"})// 将一个reactive响应式对象中的某个属性转换成一个ref响应式对象let ct =toRef(data,'counter');// 将一个reactive响应式对象中的多个属性转换成多个ref响应式对象let {counter,name} = toRefs(data)function show(){alert(data.counter);// 获取ref的响应对象,需要通过.value属性alert(counter.value);alert(name.value)}/* 函数中要操作ref处理过的数据,需要通过.value形式 */let decr = () =>{data.counter--;}let incr = () =>{/* ref响应式数据,要通过.value属性访问 */counter.value++;}
</script><template><div><button @click="data.counter--">-</button> <button @click="decr()">-</button> {{ data.counter }} &amp;{{ ct }} <button @click="data.counter++">+</button><button @click="incr()">+</button> <hr><button @click="show()">显示counter值</button></div>
</template> 
<style scoped>
</style>

三、条件和列表渲染

3.1 条件渲染

v-if 条件渲染

v-if='表达式' 只会在指令的表达式返回真值时才被渲染
也可以使用 v-else 为 v-if 添加一个“else 区块”。
一个 v-else 元素必须跟在一个 v-if 元素后面，否则它将不会被识别。

<script setup>
/* 从vue中引入reactive方法 */
import { ref, reactive } from "vue";let awesome = ref(true);
</script><template><div><h1 v-if="awesome">Vue is awesome!</h1><h1 v-else>Oh no !</h1><button @click="awesome = !awesome">Toggle</button></div>
</template><style scoped>
</style>

在这里插入图片描述

v-show条件渲染扩展：

另一个可以用来按条件显示一个元素的指令是 v-show。其用法基本一样.
不同之处在于 v-show 会在 DOM 渲染中保留该元素；v-show 仅切换了该元素上名为 display 的 CSS 属性。
v-show 不支持在 <template> 元素上使用，也不能和 v-else 搭配使用。

<script setup>
/* 从vue中引入reactive方法 */
import { ref, reactive } from "vue";
let awesome = ref(true);
</script>
<template><div><h1 id="ha" v-show="awesome">Vue is awesome!</h1><button @click="awesome = !awesome">Toggle</button></div>
</template>
<style scoped>
</style>

在这里插入图片描述

v-show 就是通过style隐藏样式
只是需要隐藏/显示 频繁切换可以用 v-show

v-if vs v-show

v-if 是“真实的”按条件渲染，因为它确保了在切换时，条件区块内的事件监听器和子组件都会被销毁与重建。
v-if 也是惰性的：如果在初次渲染时条件值为 false，则不会做任何事。条件区块只有当条件首次变为 true 时才被渲染。
相比之下，v-show 简单许多，元素无论初始条件如何，始终会被渲染，只有 CSS display 属性会被切换。
总的来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要频繁切换，则使用 v-show 较好；如果在运行时绑定条件很少改变，则 v-if 会更合适。

3.2 列表渲染

使用 v-for 指令基于一个数组来渲染一个列表。

v-for 指令的值需要使用 item in items 形式的特殊语法，其中 items 是源数据的数组，而 item 是迭代项的别名：
在 v-for 块中可以完整地访问父作用域内的属性和变量。v-for 也支持使用可选的第二个参数表示当前项的位置索引。

<script setup>
/* 从vue中引入reactive方法 */
import { ref, reactive } from "vue";
let parentMessage = ref("产品");
let items = reactive([{ id: "item1", message: "可乐" },{ id: "item2", message: "百事" }
]);
</script><template><div><ul><li v-for="item in items" :key="item.id">{{item.message}}</li></ul><ul><!-- index表示索引 --><liv-for="(item, index) in items":key="index">{{ parentMessage }} - {{ index }} - {{ item.message }}</li></ul></div>
</template><style scoped>
</style>

案例：实现购物车显示和删除购物项

<script type="module" setup>
//引入模块
import { reactive } from "vue";
//准备购物车数据,设置成响应数据
const carts = reactive([{ id: "item1", name: "可乐", price: 3, number: 5 },{ id: "item2", name: "百事", price: 2, number: 10 }
]);
//计算购物车总金额
function counter() {let count = 0;for (let index in carts) {count += carts[index].price * carts[index].number;}return count;
}
//删除购物项方法
function removeThing(index) {carts.splice(index, 1);
}
</script><template><div><table><thead><th>序号</th><th>商品名</th><th>价格</th><th>数量</th><th>小计</th><th>操作</th></thead><tbody v-if="carts.length > 0"><tr v-for="(item,index) in carts" :key="index"><td>{{index+1}}</td><td>{{item.name}}</td><td>{{item.price}}</td><td>{{item.number}}</td><td>{{item.price * item.number + '元'}}</td><td><button @click="removeThing(index)">删除</button></td></tr></tbody><tbody v-else><!-- 没有数据显示--><tr><td colspan="6">购物车没有数据!</td></tr></tbody></table>购物车总金额：{{counter()}} 元</div>
</template> <style scoped>
</style>

四、双向绑定

单项绑定和双向绑定

单向绑定: 响应式数据会影响页面显示DOM的数据，反过来用户在页面上的操作不会影响响应式数据。
- （script中设置数值，HTML显示，HTML里改变数据不影响script中数值）
双向绑定: 响应式数据会影响页面，反过来页面数据的变化也会影响响应式数据
- （script设置数据，HTML显示的同时也能反向改变script里的数值）
- 用户通过表单标签才能够输入数据,所以双向绑定都是应用到表单标签上的,其他标签不行
- v-model专门用于双向绑定表单标签的value属性,语法为 v-model:value='',可以简写为 v-model=''
- v-model还可以用于各种不同类型的输入，<textarea>、<select> 元素。

代码演示：

<script type="module" setup>
//引入模块
import { ref, reactive } from "vue";let hobbys = ref([]);
let user = reactive({username: null,pwd: null,introduce: null,address: null
});// 清空全部已填数据
function clearAll() {user.username = "";user.pwd = "";user.introduce = "";user.address = "";//ref要用valuehobbys.value.splice(0, hobbys.value.length);
}
</script><template><div>账号：<input type="text" placeholder="请输入账号！" v-model="user.username" /><br />密码：<input type="password" placeholder="请输入密码！" v-model="user.pwd" /><br /><textarea v-model="user.introduce"></textarea><br />地址：<select v-model="user.address"><option value="1">闽</option><option value="2">粤</option><option value="3">京</option></select><br />爱好：<input type="checkbox" name="hbs" v-model="hobbys" value="Java" /><input type="checkbox" name="hbs" v-model="hobbys" value="C#" /><input type="checkbox" name="hbs" v-model="hobbys" value="Python" /><input type="checkbox" name="hbs" v-model="hobbys" value="C++" />{{hobbys}}<br />显示user数据： {{user}}<br /><button @click="clearAll()">清空已填数据</button></div>
</template> <style scoped>
</style>

数据显示：
result
数据清空：
All

五、数据监听器

使用 watch 函数在每次响应式状态发生变化时触发回调函数：

watch主要用于以下场景：

当数据发生变化时需要执行相应的操作
监听数据变化，当满足一定条件时触发相应操作
在异步操作前或操作后需要执行相应的操作

监控响应式数据（watch）：

<script type="module" setup>//引入模块import { ref,reactive,watch} from 'vue'let firstname=ref('')let lastname=reactive({name:''})let fullname=ref('')//监听一个ref响应式数据watch(firstname,(newValue,oldValue)=>{console.log(`${oldValue}变为${newValue}`)fullname.value=firstname.value+lastname.name})//监听reactive响应式数据的指定属性watch(()=>lastname.name,(newValue,oldValue)=>{console.log(`${oldValue}变为${newValue}`)fullname.value=firstname.value+lastname.name})//监听reactive响应式数据的所有属性(深度监视,一般不推荐)//deep:true 深度监视//immediate:true 深度监视在进入页面时立即执行一次watch(()=>lastname,(newValue,oldValue)=>{// 此时的newValue和oldValue一样,都是lastnameconsole.log(newValue)console.log(oldValue)fullname.value=firstname.value+lastname.name},{deep:true,immediate:false})
</script><template><div>全名:{{fullname}} <br>姓氏:<input type="text" v-model="firstname"> <br>名字:<input type="text" v-model="lastname.name" > <br></div>
</template> <style scoped>
</style>

监控响应式数据(watchEffect)：

watchEffect默认监听所有的响应式数据

<script type="module" setup>//引入模块import { ref,reactive,watch, watchEffect} from 'vue'let firstname=ref('')let lastname=reactive({name:''})let fullname=ref('')//监听所有响应式数据watchEffect(()=>{//直接在内部使用监听属性即可！不用外部声明//也不需要，即时回调设置！默认初始化就加载！console.log(firstname.value)console.log(lastname.name)fullname.value=`${firstname.value}${lastname.name}`})
</script><template><div>全名:{{fullname}} <br>姓氏:<input type="text" v-model="firstname"> <br>名字:<input type="text" v-model="lastname.name" > <br></div>
</template> <style scoped>
</style>

watch vs. watchEffect

watch 和 watchEffect 都能响应式地执行有副作用的回调。它们之间的主要区别是追踪响应式依赖的方式：

watch 只追踪明确侦听的数据源。它不会追踪任何在回调中访问到的东西。另外，仅在数据源确实改变时才会触发回调。watch 会避免在发生副作用时追踪依赖，因此，我们能更加精确地控制回调函数的触发时机。
watchEffect，则会在副作用发生期间追踪依赖。它会在同步执行过程中，自动追踪所有能访问到的响应式属性。这更方便，而且代码往往更简洁，但有时其响应性依赖关系会不那么明确。