vue3 基础-data-methods-computed-watch
本篇来简单了解 vue 的数据, 方法, 计算属性和监听器等相关内容.
data ( )
vue 里面的 data ( ) 函数返回一些能供模板 template 直接使用的数据, 以变量的方式进行 return 出去.
<!DOCTYPE html>
<html lang="en">
<head>
<title> data () </title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data () {
return {
message: 'hello, world',
show: false
}
},
template: `<div>{{message}}</div>`
})
const vm = app.mount('#root')
</script>
</body>
</html>
要改变 message 的值, 只需要通过:
vm.$data.message = 'youge'
当然如果 data ( ) return 的数据变量只有一层, 则可以更简单地用:
vm.message = 'youge'
methods: { }
里面用来放一些有 dom 元素绑定事件的方法. 值得注意的是这些 方法的 this 都指向了 app 实例.
<!DOCTYPE html>
<html lang="en">
<head>
<title> methods: { } </title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data () {
return {
message: 'hello, world'
}
},
methods: {
// 方法的 this 都指向了 app 哦
handleClick () {
console.log('click', 'this的指向是app的$data.message,', this.message)
},
// 传参数也是可以的哈
formatString (str) {
return str.toUpperCase()
}
},
template: `<div @click="handleClick">{{message}} 点我</div>`
})
const vm = app.mount('#root')
</script>
</body>
</html>
在控制台则会输出:
click this的指向是app的$data.message, hello, world
因此在 methods 中, 如果要用到 this 的特性, 是不能用 箭头函数的, 因为箭头函数的 this 指向外层, 即这里 app 的外层, 这样就会一直找到了 window 对象啦. (变量作用域). 所以还是用传统的 "小括号, 花括号" 的方式来写哦. 最后, 既然是方法 (或者函数) 也都是可以传参的.
computed: { }
用来存储一个动态计算的属性值. 先以一个不太优雅的方式来实现一个计算过程, 如果不用 computed 的话:
<!DOCTYPE html>
<html lang="en">
<head>
<title> computed 前世 </title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data () {
return {
message: 'hello, world',
count: 8,
price: 5
}
},
template: `<div>总价是: {{ count* price }}</div>`
})
const vm = app.mount('#root')
</script>
</body>
</html>
则会显示: "总价是: 40". 如果为了让这种固定计算的代码变得更加有语义化一些, 则就可以定义一个 语义化的计算属性, 假设名字叫 money. 其是一个动态计算的值, money = count * price.
<!DOCTYPE html>
<html lang="en">
<head>
<title>computed:{ }</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data () {
return {
message: 'hello, world',
count: 8,
price: 5
}
},
computed: {
money () {
return this.price * this.count
}
},
template: `<div>总价是: {{ money }}</div>`
})
const vm = app.mount('#root')
</script>
</body>
</html>
假设现在动态去改变 count 的值, 如:
vm.count = 100
则对应的计算属性 money 的值也会自动变为 100 * 5 = 500.
因此 computed 计算属性指的是 "这个属性值" 是由其他几个数据 "计算" 出来的. 当相关数据发生变化时, 其计算属性值也会动态更新. 从个人使用的体验来看, 用计算属性确实会让代码逻辑更加语义化和优雅很多.
最后要能区分的是 computed 和 methods 里面的方法的差异在于:
- computed 只有当依赖的内容发生变化, 才会重新计算
- methods 只要页面重新渲染 (mounted) 就会重新计算
由此可见 computed 会带有一种 "缓存" 的机制, 从而降低页面一渲染就要计算所带来的消耗.
watch: { }
用来监听数据的一些变化等做一些异步的处理. 假设我们要监听上栗的 price 属性, 当其发生变化的时候, 隔3秒进行一些逻辑处理:
<!DOCTYPE html>
<html lang="en">
<head>
<title> watch: {} </title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data () {
return {
message: 'hello, world',
count: 8,
price: 5
}
},
watch: {
// 监听 price, 当其发生变化3秒后, 打印一个 "price changed"
price () {
setTimeout(() => {
console.log('price changed')
}, 2000);
}
}
})
const vm = app.mount('#root')
</script>
</body>
</html>
则这里的 watch 对 price 进行了监听. 当 price 的值发生变化时, 则会触发一些异步处理的逻辑哦.
甚至还能监听到该数据前后变化的值, 比如我们要监听 price 的当前值和变化前的值:
<!DOCTYPE html>
<html lang="en">
<head>
<title> methods: { } </title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data () {
return {
message: 'hello, world',
count: 8,
price: 5
}
},
watch: {
// 都是形参哈
price (current, prev) {
console.log("price 当前是:", current, "之前是: ", prev)
}
},
const vm = app.mount('#root')
</script>
</body>
</html>
则控制台显示:
price 当前是: 888 之前是: 5
利用这种特性, 不难想到上栗的 computed 来计算 money 也可以用 wath实现:
<!DOCTYPE html>
<html lang="en">
<head>
<title> methods: { } </title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data () {
return {
message: 'hello, world',
count: 2,
price: 5,
money: 10
}
},
watch: {
// 当 price 发生变化时, 函数会执行, 都是形参哈
price (current, prev) {
this.money = current * this.count
}
},
template: `<div>总价是: {{ money }}</div>`
})
const vm = app.mount('#root')
</script>
</body>
</html>
最后小结一波吧:
- 本篇整体对 data (), methods: { }, computed: { }, watcher: { } 的基本用户和场景有初步介绍
- computed 和 methds 都能实现的功能, 推荐用 computed, 因为有一定的 "缓存" 机制
- computed 和 watcher 都能实现的功能, 推荐用 computed, 因为写起来更简洁
vue3 基础-data-methods-computed-watch的更多相关文章
- vue3 使用 data、computed、methods
简单数据ref复杂数据reactive 使用方法: // useCount.js import {ref,reactive,computed} from 'vue' export default fu ...
- vue中methods,computed，filters,watch的总结
08.28自我总结 vue中methods,computed,filters,watch的总结 一.methods methods属性里面的方法会在数据发生变化的时候你,只要引用了此里面分方法,方法就 ...
- vue.js 中 data, prop, computed, method，watch 介绍
vue.js 中 data, prop, computed, method,watch 介绍 data, prop, computed, method 的区别 类型 加载顺序 加载时间 写法 作用 备 ...
- [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent c ...
- vue报错 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent c ...
- vue methods computed watch区别
一.methods和computed computed是计算属性,methods是方法. html: <p>Reversed message: "{{ reversedMessa ...
- vuex的state在组件选项data和computed上引用的区别
引用在vue组件的data选项,不因数值被改变而更新引在在vue组件的computed选项,因数值变化而更组件 案例代码如下,调整下引用vue和vuex地址即可展示 <!DOCTYPE html ...
- 报错：[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop bei
项目中遇到父组件传值 activeIndex <Tabs :tabs="tabs" :activeIndex="activeIndex" >< ...
- R语言基础-data.frame
data.frame比较像表格,每一列是一个向量,即每列中的元素是同一类型:所有列具有相同的长度. x = 10:1 y = -4:5 q = c("Ha","oh&qu ...
- vue3基础
什么是CDN? 内容分发网络--通过相互链接的网络系统,利用最靠近用户的服务器,更快更可靠的发送给用户. vue的cdn引入 method中的函数为什么不能用this? this的主要使用是来获取da ...
随机推荐
- vue--Element-UI Table 表格指定列添加点击事件
最近使用了Element-UI中的Table表格,因为需求需要在指定的列点击跳转,所以必须添加个点击事件,我这里是弹框展示table再点击跳转的,如图所示: 下面是我实现具体的代码(只是代码的一部分, ...
- Linux Vim 最全面教程：从入门到精通
一.引言 Vim 是一款功能强大且在 Linux 系统中广泛使用的文本编辑器.它有着高效的编辑模式.丰富的快捷键以及众多强大的功能,对于想要深入学习 Linux 系统操作以及进行文本处理相关工作的新手 ...
- Typecho的Joe主题开启文章导航目录树
引言 发现从typora复制过来的markdown代码中的目录导航[toc]语句没生效, 没有像typora或其他markdown编辑器生成导航目录树, 网上搜了下, 发现个解决方法, 在主题设置里插 ...
- MySQL - [08] 存储过程
题记部分 一.什么是存储过程 存储过程是事先经过编译并存储在数据库中的一段SQL语句的集合,调用存储过程可以简化应用开发人员的很多工作,减少数据在数据库和应用服务器之间的传输,对于提高数据处理的效 ...
- Processing中获取表格数据( .tsv\.csv )的经验分享
在日常收集数据的需求中,会有很多场合用到表格数据类型,如.tsv和.csv,一来高效查看和编辑,二来数据条理清晰,导入数据结构方便.在Prcocessing中帮我预留好了loadTable().loa ...
- 针对N=p^rq分解之初探
针对N=p^r*q分解之初探 论文地址:https://eprint.iacr.org/2015/399.pdf 题目:https://www.nssctf.cn/problem/2016 from ...
- @ComponentScan @MapperScan 拆分项目的时候，这两个注解很重要
今天,在做项目拆分的时候遇到了个问题,就是将service和dao层拆完之后,项目启动不起开了,如图: 最终解决办法,在启动类上增加两个注解搞定: @ComponentScan(basePackage ...
- Java 设计模式：装饰者模式（Decorator Pattern）
一.模式定义 装饰者模式属于结构型设计模式,允许通过动态包装对象的方式为对象添加新功能,提供比继承更灵活的扩展方式.该模式通过组合替代继承,遵循开闭原则(对扩展开放,对修改关闭). 二.核心角色 Co ...
- DBeaver连接mysql时Public Key Retrieval is not allowed错误
前言 DBeaver 连接 mysql 时,报错:Public Key Retrieval is not allowed 解决 在新建连接的时候,驱动属性里设置 allowPublicKeyRetri ...
- Golang入门：Linux上的go语言安装与配置
Tips:本文以本文撰写时的 Go 语言最新版本,也就是 go.1.19.2 版本为例. Linux 发行版本使用 Ubuntu 22.04.1 LTS 为例来做演示. 安装 C 工具 Go 的工具链 ...