Vue3 计算属性的特性

computed:里面的方法

仅当依赖的值发生变动时，才会重新进行计算

这样一来解决的是性能问题

而methods里面的方法，哪怕无关值发生变动，也会重新进行计算

下面是两组对比

1-通过distance()计算属性来计算路程

2-通过getDis()方法计算路程

3-通过timestamp()得到时间戳

4-通过getTsp()得到时间戳

另：addTime()方法是为了增加时间

效果如下

点击按钮，1、2、4发生改变

完整html代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>demo12:计算属性的特性</title> <script src="https://unpkg.com/vue@next"></script>
</head>
<body><div id="app"></div>
<script>const app = Vue.createApp({data(){return{time:0.5,speed:18,nobody:"干扰项",}},computed:{distance(){return this.time*this.speed;},timestamp(){return Date.now();}},methods:{getDis(){return this.time*this.speed;},getTsp(){return Date.now();},addTime(){this.time += 0.5},},template:`<h1>1-distance():{{distance}}km</h1><h1>2-getDis():{{getDis()}}km</h1><h1>3-timestamp():{{timestamp}}</h1><h1>4-getTsp():{{getTsp()}}</h1><button @click="addTime">增加时间</button>    `})const vm = app.mount('#app')
</script>
<style>.one{color:green;}.two{color:red;}
</style>
</html>

Vue3 计算属性的特性相关推荐

Vue3计算属性和异步计算属性
文章目录一.简要介绍二.计算属性核心源码三.异步计算属性核心源码一.简要介绍不论是计算属性,还是异步计算属性,都是依托于Vue3整体的响应式原理实现的.其核心依旧是ReacetEffect类 ...
Vue3计算属性computed
计算属性computed是用来存储属性数据的对数据进行逻辑处理操作,实现数据包装计算属性通常依赖于当前vue对象中的普通属性当依赖的依赖的普通属性发生变化的时候,计算属性也会发生变化计算属性俩 ...
Vue3 - computed 计算属性（详细教程）
简介相信大家在 Vue2 中已经领略到了其功能,不再过多赘述了. 计算属性处理一些复杂的运算非常合适,对于任何包含响应式数据的复杂逻辑的表达式,都建议使用计算属性来完成,而不是臃肿的在模板中直接书写 ...
08、VUE计算属性
1.计算属性简介在原生的JavaScript中我们需要一个来自不同数的和的变量, 我们会使用let num=a+b:这种写法,但是当a和b发生改变的时候,num并不会自动修改,在vue中我们提供了 ...
Vue 计算属性缓存和方法的区别：从另一段代码来看【vue3学习笔记】
首发自我的博客 zhangmaimai.com,可以访问获取更多内容与及时更新~ https://zhangmaimai.com/2021/08/20/vue-computed-caching-vs- ...
Vue3学习之第三节：setup()中使用计算属性
vue2的方式写computed: 代码片段: data() {return {num1: 0,num2: 0,};},computed: {result() {return parseInt(thi ...
Vue3源码阅读指南——计算属性（effectcomputed）
在阅读Vue3响应式数据部分的源代码时,effect和computed部分的确有着其设计精巧之处.其代码实现是在packages/reactivity/effect.ts和packages/react ...
Vue源码系列4：模拟实现vue3.x中的计算属性
前言计算属性,功能和vue2.x基本等同,本文主要对其功能进行模拟实现一.完整代码 const reactMap = new WeakMap(); const ReactiveFlags = {I ...
Vue3（撩课学院）笔记01-创建实例对象，v-for遍历，时间绑定，传参，时间修饰符，计算属性，v-if，v-show，深拷贝，v-model与各类表单的绑定
1.创建vue实例对象 <!DOCTYPE html> <html lang="en"> <head><meta charset=&quo ...

Vue3 计算属性的特性

Vue3 计算属性的特性相关推荐

最新文章

热门文章