1. 计算属性
正常情况下, 函数的每次调用, 都会被执行; 但是计算属性是由缓存的, 意思是只要被调用了一次之后, 接下来的调用都不会执行, 而是给出上一次的执行结果, 直到其依赖的响应式数据变化而重新计算
首先 引入Vue中的computed , computed的使用方式是-- computed(()=>{方法体}), 这种方式也就是函数回调
接下来我们就需要做一个案例, 分别调用math方法和computed方法 进行演示
运行代码
完整代码:
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>缓存</title>
</head>
<div id="app">{{math}}{{math}}{{con()}}{{con()}}
</div><body><script type="module">import { ref, createApp, computed } from './vue.esm-browser.js';createApp({setup() {const math = computed(() => {console.log('计算属性')})const con = () => {console.log('方法')}return {math,con}}}).mount('#app')</script>
</body></html>2. 监听器
2.1 手动监听器
watch是一个用于观察和响应Vue响应式系统中数据变化的方法。它允许你指定一个数据源（可以是响应式引用、计算属性、组件的属性等），当这个数据源的值发生变化时，你可以执行一些响应的副作用（side effects）。watch可以用来监听任何响应式数据的变化。实操看图
运行代码
2.2 自动监听器
自动和手动的区别
自动监听在程序运行时就会开始监听, 手动监听则是在数据变化时才会开始监听, 同时自动监听在对多个数据进行监听到时候很方便
自动监听的语法是:
watchEffect(() => { 方法体 })
还是以reactive定义的数据作为例子
运行代码
这可能是因为我没有在监听函数里 对doit.age进行判断 , 加上后再进行测试
完整代码:
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>监听事件</title>
</head>
<div id="app"><select v-model="doit.name"><option value="kong ">请选择</option><option value="kong1">kong1</option><option value="kong2">kong2</option><option value="kong3">kong3</option></select>{{doit.name}}<select v-model="doit.age"><option value="kong ">请选择</option><option value="kong1">kong1</option><option value="kong2">kong2</option><option value="kong3">kong3</option></select>{{doit.age}}
</div><body><script type="module">import { createApp, ref, watch, reactive, watchEffect } from './vue.esm-browser.js'createApp({setup() {const doit = reactive({name: "kong",age: "kong"})// 手动监听// watch(doit, (newVal, oldVal) => {// console.log("doit的值发生了变化", newVal, oldVal)// })// watch(() => doit.name, (newVal, oldVal) => {// console.log("doit.name的值发生了变化", newVal, oldVal)// })watchEffect(() => {console.log("全局监听")if (doit.name == "kong1") {console.log("kong1")}if (doit.age == "kong2") {console.log("kong2")}})return {doit}}}).mount('#app')</script>
</body></html>
