Vue3视图渲染技术

1. 模版语言

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

1.1 插值表达式和文本渲染

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

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

<script setup type="module">let msg ="hello vue3"let getMsg= ()=>{return 'hello vue3 message'}let age = 19let bee = '蜜 蜂'// 购物车const carts = [{name:'薯条',price:3,number:10},{name:'饼干',price:6,number:8}];//计算购物车总金额function compute(){let count = 0;for(let index in carts){count += carts[index].price*carts[index].number;}return count;}
</script><template><div><h1>{{ msg }}</h1>msg的值为: {{ msg }} <br>getMsg返回的值为:{{ getMsg() }}  <br>是否成年: {{ age>=18?'true':'false' }} <br>反转: {{ bee.split(' ').reverse().join('-') }} <br>购物车总金额: {{ compute() }} <br/>购物车总金额: {{carts[0].price*carts[0].number + carts[1].price*carts[1].number}} <br></div>
</template><style scoped></style>

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

v-text：可以将数据然然成双标签中间的文本，但是不识别html元素结构文本（类似于innerText）
v-html：可以将数据渲染成双标签中间的文本,识别html元素结构的文本（innerHTML）
v-*** 写法的特点：
- 使用的是vue的命令
- 命令必须依赖标签，再开始标签中使用
- 支持使用字符串模版
- 支持常见的运算符
- 支持常见对象的API的调用
- 支持函数的调用

<script setup type="module">let msg ='hello vue3'let getMsg= ()=>{return msg}let age = 19let bee = '蜜 蜂'let redMsg ='<font color=\'red\'>msg</font>'let greenMsg =`<font color=\'green\'>${msg}</font>`
</script><template><div><span v-text='msg'></span> <br><span v-text='redMsg'></span> <br><span v-text='getMsg()'></span> <br><span v-text='age>18?"成年":"未成年"'></span> <br><span v-text='bee.split(" ").reverse().join("-")'></span> <br><span v-html='msg'></span> <br><span v-html='redMsg'></span> <br><span v-html='greenMsg'></span> <br><span v-html="`<font color='green'>${msg}</font>`"></span> <br></div>
</template><style scoped></style>

1.2 Attribute属性渲染

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

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

<script setup type="module">const data = {name:'风景'，img:'src/assets/img/logo.png'}
</script><template><div><a v-bind:href='data.url' target="_self"><img :src="data.logo" :title="data.name"><br><input type="button" :value="`点击访问${data.name}`"></a></div>
</template><style scoped>
</style>

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 type="module">import {ref} from 'vue'// 响应式数据 当发生变化时,会自动更新 dom树let count=ref(0)let addCount= ()=>{count.value++}let incrCount= (event)=>{count.value++// 通过事件对象阻止组件的默认行为event.preventDefault();}
</script><template><div><h1>count的值是:{{ count }}</h1><!-- 方法事件处理器 --><button v-on:click="addCount()">addCount</button> <br><!-- 内联事件处理器 --><button @click="count++">incrCount</button> <br><!-- 事件修饰符 once 只绑定事件一次 --><button @click.once="count++">addOnce</button> <br><!-- 事件修饰符 prevent 阻止组件的默认行为 --><a href="http://www.baidu.com" target="_blank" @click.prevent="count++">prevent</a> <br><!-- 原生js方式阻止组件默认行为 (推荐) --><a href="http://www.baidu.com" target="_blank" @click="incrCount($event)">prevent</a> <br></div>
</template><style scoped></style>

2. 响应式基础

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

示例：

<script type="module" setup>let counter = 0;function show(){alert(counter);}
</script><template><div><button @click="counter--">-</button> {{ counter }} <button @click="counter++">+</button><hr><!-- 通过运行代码，我们发现counter值,会改变,但是页面不改变! 默认Vue3的数据是非响应式的!--><button @click="show()">显示counter值</button></div>
</template> <style scoped></style>

2.1 响应式实现关键字ref

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

<script type="module" setup>/* 从vue中引入ref方法 */import {ref} from 'vue'/* 我们使用 `ref` 包裹了一个数字，在代码中给这个数字加 1 后，视图也会跟着动态更新。*/let counter = ref(0);function show(){alert(counter.value);}/* 函数中要操作ref处理过的数据,需要通过.value形式 */let decr = () =>{counter.value--;}let incr = () =>{counter.value++;}
</script><template><div><button @click="counter--">-</button> <button @click="decr()">-</button> {{ counter }} <button @click="counter++">+</button><button @click="incr()">+</button> <hr><button @click="show()">显示counter值</button></div>
</template> <style scoped></style>

2.2 响应式实现关键字reactive

通过使用 reactive（）函数创建一个响应式对象或数组：

<script type="module" setup>/* 从vue中引入reactive方法 */import {ref,reactive} from 'vue'let data = reactive({counter:0})function show(){alert(data.counter);}/* 函数中要操作reactive处理过的数据,需要通过 对象名.属性名的方式 */let decr = () =>{data.counter--;}let incr = () =>{data.counter++;}
</script><template><div><button @click="data.counter--">-</button> <button @click="decr()">-</button> {{ data.counter }} <button @click="data.counter++">+</button><button @click="incr()">+</button> <hr><button @click="show()">显示counter值</button></div>
</template> <style scoped></style>

ref 与reactive 的不同：

1、ref函数：更适合单个变量
- 在Script标签中操作 ref 响应式数据要通过 .value
- 在template中操作 ref 响应式则无需 .value
2、reactive函数：更适合对象
- 在Script/template 操作reactive响应式数据都直接使用对象名.属性名的方法即可

2.3 toRef 函数和 reactive 函数（了解）

toRef函数：将reactive响应式数据中的某个属性转换为ref数据

toRefs函数：同时将reactive响应式数据中的多个属性转换为ref响应式数据

3. 条件和列表渲染

3.1 条件渲染

v-if = "表达式/数据" 数据为true，则当前元素会渲染进入dom树

v-else：自动和前一个 v-if 做取反操作

代码示例：

<script type="module" setup>import {ref} from 'vue'let flag = ref(true)
</script><template><div><h1 v-if="awesome">Vue</h1><h1 v-else>Vite</h1><button @click="flag = !flag">Toggle</button></div>
</template> <style scoped>
</style>

v-show = "表达式/数据" 数据为true，元素则展示子啊页面上，否则不展示

<script type="module" setup>import {ref} from 'vue'let flag = ref(true)
</script><template><div><h1 id="ha"  v-show="flag">Vue</h1><h1 id="hb"  v-if="flag">Vue</h1><h1 id="hc"  v-else>Vite</h1><button @click="flag = !flag">Toggle</button></div>
</template> <style scoped>
</style>

v-if 与 v-show的比较

v-if 是“真实的”按条件渲染，因为它确保了在切换时，条件区块内的事件监听器和子组件都会被销毁与重建。
v-if 也是惰性的：如果在初次渲染时条件值为 false，则不会做任何事。条件区块只有当条件首次变为 true 时才被渲染。
相比之下，v-show 简单许多，元素无论初始条件如何，始终会被渲染，只有 CSS display 属性会被切换。

3.2 列表渲染

v-for：指令的值需要使用 item in items 形式的特殊语法，其中 items 是源数据的数组，而 item 是迭代项的别名：

在 v-for 块中可以完整地访问父作用域内的属性和变量。v-for 也支持使用可选的第二个参数表示当前项的位置索引。

<script type="module" setup>import {ref,reactive} from 'vue'let parentMessage= ref('产品')let items =reactive([{id:'item1',message:"薯片"},{id:'item2',message:"可乐"}])
</script><template><div><ul><!-- :key不写也可以 --><li v-for='item in items' :key='item.id'>{{ item.message }}</li></ul><ul><!-- index表示索引,当然不是非得使用index这个单词 --><li v-for="(item, index) in items" :key="index">{{ parentMessage }} - {{ index }} - {{ item.message }}</li></ul></div>
</template> <style scoped>
</style>

4. 双向绑定

单项绑定和双向绑定

单向绑定: 响应式数据的变化会更新dom树,但是dom树上用户的操作造成的数据改变不会同步更新到响应式数据
双向绑定: 响应式数据的变化会更新dom树,但是dom树上用户的操作造成的数据改变会同步更新到响应式数据
- 用户通过表单标签才能够输入数据,所以双向绑定都是应用到表单标签上的,其他标签不行
- v-model专门用于双向绑定表单标签的value属性,语法为 v-model:value='',可以简写为 v-model=''
- v-model还可以用于各种不同类型的输入，<textarea>、<select> 元素。

代码示例：

<script type="module" setup>//引入模块import { reactive,ref} from 'vue' let hbs = ref([]); //存储爱好let user = reactive({username:null,password:null,introduce:null,pro:null})   function login(){alert(hbs.value);alert(JSON.stringify(user));}function clearx(){//user = {};// 这中写法会将数据变成非响应的,应该是user.username=""user.username=''user.password=''user.introduce=''user.pro=''hbs.value.splice(0,hbs.value.length);;}
</script><template><div>账号： <input type="text" placeholder="请输入账号！" v-model="user.username"> <br>密码： <input type="text" placeholder="请输入账号！" v-model="user.password"> <br>爱好： 吃 <input type="checkbox" name="hbs" v-model="hbs" value="吃"> 喝 <input type="checkbox" name="hbs" v-model="hbs" value="喝">玩 <input type="checkbox" name="hbs" v-model="hbs" value="玩">乐 <input type="checkbox" name="hbs" v-model="hbs" value="乐"><br>简介:<textarea v-model="user.introduce"></textarea><br>籍贯:<select v-model="user.pro"><option value="1">黑龙江</option><option value="2">吉林</option><option value="3">上海</option><option value="4">北京</option><option value="5">天津</option><option value="6">深圳</option></select> <br><button @click="login()">登录</button> <button @click="clearx()">重置</button><hr>显示爱好:{{ hbs }}<hr>显示用户信息:{{ user }}</div> 
</template> <style scoped>
</style>

5. 属性计算

模板中的表达式虽然方便，但也只能用来做简单的操作。如果在模板中写太多逻辑，会让模板变得臃肿，难以维护。比如说，我们有这样一个包含嵌套数组的对象：

<script type="module" setup>//引入模块import { reactive,computed} from 'vue'const author = reactive({name: 'John Doe',books: ['Vue 2 - Advanced Guide','Vue 3 - Basic Guide','Vue 4 - The Mystery']})</script><template><div><p>{{author.name}} Has published books?:</p><span>{{ author.books.length > 0 ? 'Yes' : 'No' }}</span></div>
</template> <style scoped>
</style>

使用计算属性来描述依赖响应式状态的复杂逻辑。这是重构后的示例：

<script type="module" setup>//引入模块import { reactive,computed} from 'vue'const author = reactive({name: 'John Doe',books: ['Vue 2 - Advanced Guide','Vue 3 - Basic Guide','Vue 4 - The Mystery']})// 一个计算属性 refconst publishedBooksMessage = computed(() => {console.log("publishedBooksMessage")return author.books.length > 0 ? 'Yes' : 'No'})// 一个函数let hasBooks = ()=>{console.log("hasBooks")return author.books.length > 0?'Yes':'no'}</script><template><div><p>{{author.name}} Has published books?:</p><span>{{ author.books.length > 0 ? 'Yes' : 'No' }}</span><span>{{ hasBooks() }}</span><!-- 调用方法,每个标签都会调用一次 --><span>{{ hasBooks() }}</span><p>{{author.name}} Has published books?:</p><span>{{ publishedBooksMessage }}</span><!-- 属性计算,属性值不变时,多个个标签只会调用一次 --><span>{{ publishedBooksMessage }}</span></div>
</template> <style scoped>
</style>