AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

【Vue3从零开始-第二章】2-4 数据、方法、计算属性和侦听器

2022-09-26 124
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 【Vue3从零开始-第二章】2-4 数据、方法、计算属性和侦听器

]UWOD(KIB9LJS9~S[T{QHM9.png


前言


在上一篇文章中，讲过了vue的模板语法，今天我们要深入了解一下vue的data/methods/computed/watch的用法。之前的文章中有用过部分内容，通过今天的文章，你将对vue的这些方法有一个更深层次的理解。


data


定义数据的时候，是在vue创建实例的时候去写一个data函数，这个函数在之前的内容中也是经常用到的。在data函数中，会把对应的数据通过return返回给模板，在模板中就可以使用相应的数据。


在之前的内容中，我们知道可以在浏览器控制台通过vm.$data去改变data函数中的数据值，其实在vue里面可以去掉$data也可以改变data函数中的数据值。


<script>
    const app = Vue.createApp({
        data(){
            return {
                message: 'Hello World'
            }
        },
        template: "<div>{{message}}</div>"
    });
    const vm = app.mount('#root');
</script>
复制代码


P1)RT7BOJSQ8DYX56TA$E8F.png

methods


在methods中，我们可以定义模板中使用到的各种方法，在之前的内容中，我们也用到过。


<script>
    const app = Vue.createApp({
        data(){
            return {
                message: 'Hello World'
            }
        },
        methods: {
            handleClick(){
                this.message = 'bye'
            }
        },
        template: "<div v-on:click='handleClick'>{{message}}</div>"
    });
    const vm = app.mount('#root');
</script>
复制代码


在methods中定义的方法，是有一个this的，这个this就表示vue实例，通过this可以直接修改data方法中的数据值。


~[OY(JRHOO}L4O)7SWXOCDD.png


如果你想要获取到vue实例的this指向，就不能在methods中定义的方法上使用箭头函数。


methods: {
    handleClick: () => {
        console.log('通过箭头函数打印data函数中的值：', this.message)
    }
},
复制代码


5Z22HGI34E8)K[8]YZ4N4[2.png


在浏览器控制台中可以看到，打印出来的是undefined，其实这时候的this指向的并不是vue实例了，而是window，有兴趣的小伙伴可以直接打印this看看返回值。


methods中的函数除了通过v-on绑定的事件去触发，还可以直接在插值表达式中使用。


const app = Vue.createApp({
    data(){
        return {
            message: 'Hello World'
        }
    },
    methods: {
        formatString: (string) => {
            return string.toUpperCase()
        }
    },
    template: "<div>{{formatString(message)}}</div>"
});
const vm = app.mount('#root');
复制代码


1QZQ5GJS`EFBLD@IV@ZJ2CQ.png


在浏览器中刷新之后，可以直接渲染出大写字母HELLO WORLD。


computed


<script>
    const app = Vue.createApp({
        data(){
            return {
                message: 'Hello World',
                count: 2,
                price: 4
            }
        },
        template: "<div>{{count * price}}</div>"
    });
    const vm = app.mount('#root');
</script>
复制代码


TIA7J{L6QKA1XVR9]U4IR74.png


通过上面这个代码可以看出，我们可以在插值表达式中直接去计算data函数中的数据值，但是直接在模板里面去计算，第一是如果计算量太大的话看起来不太美观，第二是没有很好的做到语义化。


理想状态下应该是可以在data函数中定义一个total，然后让total去计算count和price的值。但是data函数中不能直接在函数返回里面调用自身的数据，所以我们可以通过一个计算属性computed来完成这件事。


<script>
    const app = Vue.createApp({
        data(){
            return {
                message: 'Hello World',
                count: 3,
                price: 5
            }
        },
        computed:{
            total(){
                return this.count * this.price
            }
        },
        template: "<div>{{total}}</div>"
    });
    const vm = app.mount('#root');
</script>
复制代码


UA1BP6W66ZWPFU2A0PVAVOG.png


  • 在computed中定义一个total函数，在函数中返回计算好的数值，就可以在插值表达式中直接使用total，并不需要像methods中的函数一样，去给插值表达式中的total添加一个 ()代表函数。


  • 通过修改data函数中的数据值，computed中的函数会重新进行计算然后将新的数据值返回到模板中渲染出来。


computed和methods对比


<script>
    const app = Vue.createApp({
        data(){
            return {
                message: 'Hello World',
                count: 4,
                price: 7
            }
        },
        methods: {
            getTotal(){
                return this.count * this.price
            }
        },
        template: "<div>{{getTotal()}}</div>"
    });
    const vm = app.mount('#root');
</script>
复制代码


0BG2UM~[UM]S%(CY~_I}C@T.png


可能有些人会有疑问，这个计算方式完全可以通过methods中的方法去完成，为什么要使用computed呢？


  • 通过下面的例子，你会发现computed和methods的区别了。


const app = Vue.createApp({
    data(){
        return {
            message: 'Hello World',
            count: 4,
            price: 7
        }
    },
    computed:{
        time(){
            return Date.now()
        }
    },
    methods: {
        getTime(){
            return Date.now()
        }
    },
    template: `<div>
        <div>computed - {{message}} - {{time}}</div>    
        <div>methods - {{message}} - {{getTime()}}</div>  
    </div>`
});
const vm = app.mount('#root');
复制代码


我们在computed和methods中都返回当前时间戳，然后我们去浏览器控制台修改message的值，看看这两个之间的具体区别。


$`UF]4Z6~%$~@XPVWW$8_LR.png


通过浏览器输出的内容可以看出，当message值改变之后，computed返回的时间戳是不变的，而methods中的方法返回的时间戳是随着页面数据改变而改变的。


因为当页面重新渲染之后，methods中的方法也会随之重新渲染，而computed中只有依赖的数据发生变化时，才会重新执行计算。


watch


<script>
    const app = Vue.createApp({
        data(){
            return {
                message: 'Hello World',
                count: 4,
                price: 7
            }
        },
        watch: {
            price(){
                setTimeout(() => {
                    console.log('price change')
                }, 3000)
            }
        },
        template: `<div>{{message}}</div>`
    });
    const vm = app.mount('#root');
</script>
复制代码


U(1043[L2(38PBY}S~W_@(D.png


在watch中可以通过监听data函数中定义的数据，当数据发生变化时，可以执行一些异步操作。


  • 在watch中定义的监听方法中，有两个参数：当前值，上一个值


watch: {
    price(current, prev){
        console.log(current, prev)
    }
},
复制代码


4_S)UPO5]HUPZ_T_RYR2HP7.png


在watch中也可以执行computed计算属性那样的操作，但是由于watch的特殊性，需要现在data中去定义值，然后才能在watch中进行侦听，最后在返回到页面上进行渲染，所有根据代码的简约性来看，不建议使用watch去做computed中能做的事。


总结


  • computed和methods都能实现的功能，建议使用computed，因为会有缓存。
  • computed和watch都能实现的功能，建议使用computed，因为更加简洁。
文章标签：
JavaScript
缓存
关键词：
计算侦听器VUE.js
计算属性VUE.js
侦听器VUE.js
计算属性侦听器VUE.js
计算VUE.js
蜡笔小心_
目录
相关文章
html的七十二变
|
8天前
|
存储 缓存 JavaScript
如何在大型 Vue 应用中有效地管理计算属性和侦听器
在大型 Vue 应用中，合理管理计算属性和侦听器是优化性能和维护性的关键。本文介绍了如何通过模块化、状态管理和避免冗余计算等方法，有效提升应用的响应性和可维护性。
html的七十二变
22 7
CamilleKing
|
17天前
|
JavaScript 数据管理 Java
在 Vue 3 中使用 Proxy 实现数据双向绑定的性能如何？
【10月更文挑战第23天】Vue 3中使用Proxy实现数据双向绑定在多个方面都带来了性能的提升，从更高效的响应式追踪、更好的初始化性能、对数组操作的优化到更优的内存管理等，使得Vue 3在处理复杂的应用场景和大量数据时能够更加高效和稳定地运行。
CamilleKing
36 1
CamilleKing
|
17天前
|
JavaScript 开发者
在 Vue 3 中使用 Proxy 实现数据的双向绑定
【10月更文挑战第23天】Vue 3利用 `Proxy` 实现了数据的双向绑定，无论是使用内置的指令如 `v-model`，还是通过自定义事件或自定义指令，都能够方便地实现数据与视图之间的双向交互，满足不同场景下的开发需求。
CamilleKing
39 1
刘大猫.
|
24天前
|
API
vue3知识点：响应式数据的判断
vue3知识点：响应式数据的判断
刘大猫.
27 3
我是快乐的嘟嘟
|
7天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking？
通过以上针对 Webpack 或 Rollup 的配置方法，就可以在 Vue 项目中有效地启用 Tree Shaking，从而优化项目的打包体积，提高项目的性能和加载速度。在实际配置过程中，需要根据项目的具体情况和需求，对配置进行适当的调整和优化。
我是快乐的嘟嘟
75 26
html的七十二变
|
8天前
|
存储 缓存 JavaScript
在 Vue 中使用 computed 和 watch 时，性能问题探讨
本文探讨了在 Vue.js 中使用 computed 计算属性和 watch 监听器时可能遇到的性能问题，并提供了优化建议，帮助开发者提高应用性能。
html的七十二变
27 8
html的七十二变
|
8天前
|
存储 缓存 JavaScript
Vue 中 computed 和 watch 的差异
Vue 中的 `computed` 和 `watch` 都用于处理数据变化，但使用场景不同。`computed` 用于计算属性，依赖于其他数据自动更新；`watch` 用于监听数据变化，执行异步或复杂操作。
html的七十二变
25 5
游客ady5kpv352g3u
|
7天前
|
JavaScript 前端开发 UED
vue学习第二章
欢迎来到我的博客！我是一名自学了2年半前端的大一学生，熟悉JavaScript与Vue，目前正在向全栈方向发展。如果你从我的博客中有所收获，欢迎关注我，我将持续更新更多优质文章。你的支持是我最大的动力！🎉🎉🎉
游客ady5kpv352g3u
17 3
html的七十二变
|
9天前
|
存储 JavaScript 开发者
Vue 组件间通信的最佳实践
本文总结了 Vue.js 中组件间通信的多种方法，包括 props、事件、Vuex 状态管理等，帮助开发者选择最适合项目需求的通信方式，提高开发效率和代码可维护性。
html的七十二变
26 5
游客ady5kpv352g3u
|
7天前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客！我是瑞雨溪，一名热爱JavaScript和Vue的大一学生。自学前端2年半，熟悉JavaScript与Vue，正向全栈方向发展。博客内容涵盖Vue基础、列表展示及计数器案例等，希望能对你有所帮助。关注我，持续更新中！🎉🎉🎉
游客ady5kpv352g3u
14 2

热门文章

最新文章

  • 1
    Vue 入门之项目目录结构介绍
  • 2
    简单vue父子iframe页面之间跨域通信传值postMessage()
  • 3
    自己设计的Vue3的实用项目（内含对项目亮点的实现思路与介绍）（上）
  • 4
    新建Vue项目
  • 5
    vue之webpack打包原理和用法详解
  • 6
    基于vue的cron表达式组件——vue-crontab插件
  • 7
    使用webstorm来创建并且运行vue项目详细教程
  • 8
    Vue.js深度解析：前端开发的生产力引擎
  • 9
    在VUE项目中做一个简单的Axios二次封装及使用
  • 10
    重读vue电商网站6之如何重置表单
  • 1
    vue(1)，小白看完都会了
    43
  • 2
    深入理解Vue.js中的nextTick：实现异步更新的奥秘
    147
  • 3
    Vue中避免滥用this去读取data中数据
    43
  • 4
    vue3服务端渲染警告解决----DefinePlugin
    120
  • 5
    vue中使用pinia及持久化
    60
  • 6
    Vue3与Vue2：对比分析与迁移指南
    394
  • 7
    双向数据绑定：Vue.js的魔法背后
    56
  • 8
    Vue class和style绑定：动态美化你的组件
    82
  • 9
    Vue 监听器：让你的应用实时响应变化
    199
  • 10
    vue3封装面包屑
    146

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • 从 0 入门函数计算
  • React 入门与实战

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 利用编译将 Vue 组件转成 React 组件
  • Vue.js在前端服务化上的实践与探索

    • 相关实验场景

    更多
  • 函数计算入门-HelloWorld应用开发
    • 下一篇
    阿里云OSS设置跨域访问