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 ...
随机推荐
- autMan奥特曼机器人-安装或更新golang依赖
autMan2.3.4及以上需要更新中间件或安装golang依赖,参照下列步骤: 一.直装版本 ssh下进入autMan文件夹下plugin/scripts下面输入以下指令: go get -u gi ...
- CentOS安装nginx服务器及配置反向代理
以下是在CentOS上安装nginx服务器并配置反向代理的步骤: 更新系统软件包: sudo yum update 安装nginx: sudo yum install nginx 启动nginx服务: ...
- /proc的相关知识
/proc的相关知识 /proc 介绍 /proc 是一种伪文件系统(也即虚拟文件系统),存储的是当前内核运行状态的一系列特殊文件,用户可以通过这些文件查看有关系统硬件及当前正在运行进程的信息,甚至可 ...
- Flink Watermark 不止可以用时间戳衡量
https://mp.weixin.qq.com/s/L5PqtcmffCIq_CnUs0WS3g
- Springboot 在项目启动时将数据缓存到全局变量
有写字典数据不会频繁更新,但是会频繁查询,想要减少数据库链接次数,把内容缓存到项目的全局变量中,提高方法查询速度 import javax.annotation.PostConstruct; impo ...
- 全程不用写代码，我用AI程序员写了一个飞机大战
前言 还在为写代码薅头发吗?还在为给出的需求无处下手而发愁吗?今天宏哥分享一款开发工具的插件,让你以后的编程变得简单起来. 作为一个游戏编程小白,能完成自己工作就不错了,还能玩别的,这在以前想都不敢想 ...
- Java 解析XML的几种方式：DOM、SAX、JDOM和DOM4J。
归纳总结Java解析XML主要有四中方式,分别是DOM.SAX.JDOM和DOM4J.其中DOM和SAX是官方包自带,另外两个JDOM和DOM4J是第三方包. 一.此篇测试代码用到的XML情况 . 1 ...
- 微信小程序分包体积优化建议
代码包体积优化 启动性能优化最直接的手段是降低代码包大小,代码包大小直接影响了下载耗时,影响用户启动小程序时的体验. 开发者可以采取以下手段优化代码包体积: 1. 合理使用分包加载 推荐所有小程序使用 ...
- 解决本地代理问题 git 或者 curl Failed to connect to 127.0.0.1 port 1087 after 8 ms: Connection refused
问题出现原因 git配置了代理 本地配置了代理 执行这个命令可以看到自己的代理设置: env | grep -I proxy 临时更改代理 在当前终端执行以下命令,就可以临时将代理取消掉 export ...
- MFC中AfxBeginThread、AfxEndThread、GetExitCodeThread的配合使用(工作者线程)
//线程入口函数(全局) UINT MyThreadProc(LPVOID pParam) { //在需要添加返回值的地方 if (...) { AfxEndThread(0); return 0; ...