【Vue】基础(数据 & 计算属性 &…
2020-04-22 16:00:57来源:博客园 阅读 ()
【Vue】基础(数据 & 计算属性 & 方法)
Vue中data对象 vs 方法 vs 计算属性比较先从一个例子分析
<template> <div> <p>source array:{{numbers}}</p> <p>sorted array:{{sortArray()}}</p> <p>3 in array index : {{findIndex(3)}}</p> <p>totalNumbers : {{totalNumbers}}</p> <button @click="changeArray()">修改数组</button> </div> </template> <script> export default { data() { return { numbers: [1, 5, 3, 9, 2, 4, 8] }; }, computed: { totalNumbers() { console.log("compute total"); return this.numbers.reduce((total, val) => total + val); } }, methods: { sortArray() { return this.numbers.slice(0).sort((a, b) => a - b); }, findIndex(value) { console.log("find index"); return this.numbers.findIndex(m => m === value); }, changeArray() { for (let i = 0; i < this.numbers.length; i++) { this.$set(this.numbers, i, Math.floor(Math.random() * 100)); } } } }; </script>
运行效果
1. 首先定义一组数组(数据)
2. 定义计算属性,计算数组总和(计算属性)
3. 定义3个方法,排序数组,查找指定值下标,修改数组(方法)
数据
data对象最适合纯粹的数据:如果想将数据放在某处,然后在模板、方法或者计算属性中使用
计算属性
计算属性适用于执行更加复杂的表达式,这些表达式往往太长或者需要频繁地重复使用
计算属性会有缓存,依赖的数据没有变化,会直接从缓存里取出,这个可以打印console.log,计算属性可以验证。所以计算属性适合用于密集cpu计算。
计算属性可以设置读写
total:{
get(){
....
}
set(){
...
}
}
方法
如果希望为模板添加函数功能时,最好使用方法,通常是传递参数,根据参数得到不同结果。
data对象 vs 方法 vs 计算属性
可读 | 可写 | 接受参数 | 需要运算 | 缓存 | |
---|---|---|---|---|---|
data | 是 | 是 | 不能 | 否 | 否 |
方法 | 是 | 否 | 能 | 是 | 否 |
计算属性 | 是 | 是 | 否 | 是 | 是 |
转发请标明出处:https://www.cnblogs.com/WilsonPan/p/12755476.html
原文链接:https://www.cnblogs.com/WilsonPan/p/12755476.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:Hugo博客搭建
下一篇:0基础入门前端,会遇到哪些困难?
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-15
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-15
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-14
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-13
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-02
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash