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 ...
随机推荐
- Linux Vim 最全面教程：从入门到精通
一.引言 Vim 是一款功能强大且在 Linux 系统中广泛使用的文本编辑器.它有着高效的编辑模式.丰富的快捷键以及众多强大的功能,对于想要深入学习 Linux 系统操作以及进行文本处理相关工作的新手 ...
- mybatis - [11] ResultMap结果集映射
题记部分 用于处理数据库中的字段名和Java实体类中的属性名不一致的问题 数据库中的字段为id,name,pwd.Java实体类属性为id,name,password. 在映射文件中select标签使 ...
- 【Python-Json】自定义类输入json序列化、json的读取与写入
AI 问答 Question json支持numpy数组么 Answer 不幸的是,标准的 JSON格式 不直接支持 NumPy 数组.JSON是一种用于存储和交换数据的文本格式,它有限的数据类型只包 ...
- abaqus建模时突发意外，软件闪退怎么才能找回操作？
abaqus/CAE 建模的时候可能经常由于各种各样的原因闪退(中断.卡住.未响应等等.) 这是很让人崩溃的时候,一个良好的习惯就是经常Ctrl+S,并且操作的时候不要太急,否则abaqus容易反应不 ...
- 删除空白行，报错 raise KeyError(list(np.compress(check, subset))) KeyError: ['姓名']
之前这段程序跑完后没报错,经调试发现到这一句报错 > df.dropna(subset=['姓名'],inplace=True) 意思是删除'姓名'列 含有'NAN'的行 思考第一步:应该是 d ...
- godoc使用方法介绍
一.go doc简介 Godoc是go语言的文档化工具,类似于文档化工具godoc,类似于Python的Docstring和Java的Javadoc Godoc通过解析包含注释的Go代码来生成HTML ...
- python练习-爬虫
场景: 1.网址hppt://xxx.yyy.zzz.cn2.打开网页后显示 : 3.填上姓名 身份证和验证码,点击查询后,返回查询结果. 4.页面有cookie. 方案一: 程序中嵌入浏览器根据网址 ...
- 帮客户解决基于surging的物流速运网关内存泄漏问题
一.概述 有surging企业客户找到我,系统已经在线上环境运行,在使用过程中碰到内存不能释放的问题,每次都要和客户打招呼进行重启造成很坏的影响,问能不能彻底解决掉,然后我打包票可以解决,解决不了不收 ...
- Dubbo 中的集群容错
前言 在微服务架构中,服务间的依赖关系复杂且动态,任何一个服务的故障都可能引发连锁反应,导致系统雪崩.一个好的容错设计可以避免这些问题发生: 服务雪崩效应:单个服务崩溃或响应延迟可能导致调用链上的所有 ...
- SpringSecurity5（13-核心组件和认证流程）
SecurityContextHolder SecurityContextHolder 持有的是安全上下文的信息,当前操作的用户是谁,用户是否已经被认证,他拥有哪些角色权限等,这些都被保存在 Secu ...