目录
①computed() 会自动从其计算函数的返回值上推导出类型：
（一）数据渲染
1.插值表达式渲染数据
1.1实战案例
使用插值表达式是最直接的数据渲染方式，使用案例来展示：
1.1.1代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>第一个Vue</title> <script src="vue.global.js"></script> </head> <body> <div id="app"> {{msg}} </div> <script> Vue.createApp({ setup(){ return { msg:"yes" } } }).mount("#app") </script> </body> </html>1.1.2实现截图：
2.使用v-text和v-html来渲染数据
2.1实战案例：
2.1.1代码：
①v-html能够解析出网址格式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>数据渲染</title> </head> <body> <div id="app"> <h3>插值表达式渲染：{{obj.title}}</h3> <h3 v-text="obj.title">v-text渲染数据</h3> <h3 v-text="obj.url">v-text渲染网址</h3> <h3 v-html="obj.url">v-html渲染网址</h3> </div> <script type="module"> import {createApp,reactive} from './vue.esm-browser.js' createApp({ setup(){ const obj=reactive({ title:"v-text数据渲染", url:"<i style='color:blue'>www.baidu.com<i/>" }) return{ obj } } }).mount("#app") </script> </body> </html>2.1.2实现截图：
（二）计算属性
正常情况下函数的执⾏是及时的，被调⽤就会执⾏；⽽计算属性是有缓存的，计算属性根据其依赖的响 应式数据变化⽽重新计算
1.实战案例：
定义了两个数据x和y，设计add()相加函数，在函数中让x和y相加，他是实施执行的，在控制台能够看到被执行的次数，而sub则是一个计算属性，不同的是计算属性值会基于其响应式依赖被缓存
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>计算属性</title> </head> <body> <div id="app"> <h3>{{add()}}</h3> <h3>{{add()}}</h3> <hr> <h3>{{sub}}</h3> <h3>{{sub}}</h3> <input type="text" v-model.number="data.x"> </div> <script type="module"> import {createApp,reactive,computed} from "./vue.esm-browser.js" createApp({ setup(){ const data=reactive({ x:20, y:50 }) let add=()=>{ console.log("add执行....") return data.x+data.y } const sub=computed(()=>{ console.log("sub执行了....") return data.y-data.x }) return{ data, add, sub } } }).mount("#app") </script> </body> </html>①
computed()会自动从其计算函数的返回值上推导出类型：
2.实现截图
可能有人要问，为什么sub被调用了两次，但是控制台只显示一次呢？
因为sub为计算属性，有缓存
