computed和watch的用法和区别

简介: computed和watch的用法和区别

computed可以监听v-model(data)中的值,只要值发生变化 他就会重新去计算


computed必须是要有一个返回值的哦  


computed 属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算。主要当作属性来使用;


<div id="app">
        <input type="text" v-model="firstname">+
        <input type="text" v-model="lasttname">=
        <input type="text" v-model="fullname">
    </div>
var vm = new Vue({
            el: "#app",
            data: {
                firstname: "",
                lasttname: "",
            },
            methods: {
            },
             // computed可以监听v-model(data)中的值,只要值发生变化 他就会重新去计算
             // computed必须是要有一个返回值的哦 
            computed: {
                fullname: function () {
                    return this.firstname + "-" + this.lasttname
                }
            },
        })


//watch除了可以监听data中值的变化,还可以监听路由的变化,


//watch中有两个参数 分别是新值和旧值


 var vm = new Vue({
            el: "#app",
            data: {
            },
            methods: {
            },
            router: router,
            watch: {
                "$route.path":function(newval,oldval){
                if(newval==="/login"){
                    console.log("这是denglu页面")
                }else if(newval==="/zhuce"){
                    console.log("这是注册页面")
                }
                }
            },
        })


computed和watch的区别



《1》计算属性computed 必须要返回一个值哦 通过return来返回的

        会缓存,只要数据不发生变化,就使用缓存的数据

 

《2》 watch的回调函数里面有两个参数,分别是newval和oldval。

        不会缓存 只要数据发生变化 就会重新的去计算



相关文章
|
存储 编译器 C语言
计算机组成与体系结构期末题目解析
计算机组成与体系结构期末题目解析
2537 0
计算机组成与体系结构期末题目解析
|
安全 项目管理 开发工具
阿里云Code已升级为新版Codeup,更大容量、更多功能还免费的新版Codeup真香
阿里云Code(https://code.aliyun.com/)已经升级为新版代码管理平台Codeup,更大容量、更高性能、更多功能的新版Codeup更适合企业开发者使用。
7742 0
阿里云Code已升级为新版Codeup,更大容量、更多功能还免费的新版Codeup真香
|
10月前
|
监控 Java 应用服务中间件
tomcat相关概念与部署tomcat多实例-zabbix监控(docker部署)
通过上述步骤,您可以在Ubuntu系统上成功编译并安装OpenCV 4.8。这种方法不仅使您能够定制OpenCV的功能,还可以优化性能以满足特定需求。确保按照每一步进行操作,以避免常见的编译问题。
247 25
|
前端开发 JavaScript API
React、Vue.js 和 Angular前端三大框架对比与选择
前端框架是用于构建用户界面的工具和库,它提供组件化结构、数据绑定、路由管理和状态管理等功能,帮助开发者高效地创建和维护 web 应用的前端部分。常见的前端框架如 React、Vue.js 和 Angular,能够提高开发效率并促进团队协作。
1015 4
|
缓存 UED
Cache-Control字段是什么
【8月更文挑战第18天】Cache-Control字段是什么
439 0
|
网络安全 数据安全/隐私保护
VSC通过 SSH 连接到远程服务器时,每次都需要输入密码
VSC通过 SSH 连接到远程服务器时,每次都需要输入密码
3354 0
|
存储 大数据 程序员
逆袭吧,程序员!Python堆与优先队列的使用秘籍,助你轻松解决复杂问题!
【7月更文挑战第9天】Python的堆和优先队列是高效工具,对比列表在删除最小元素时的O(n)复杂度,堆提供O(log n)操作。优先队列利用堆数据结构,按优先级处理元素,而非FIFO。示例中,heapq模odule创建最小堆实现任务优先级执行,显示了其在解决复杂问题时的威力,助力程序员提升效率,实现编程挑战的逆袭。
149 2
|
存储 SQL 数据采集
一文带你了解数据库设计基础
什么是数据库设计? 数据库设计(Database Design)是指对于一个给定的应用环境,构造最优的数据库模式,建立数据库及其应用系统,使之能够有效地存储数据,满足各种用户的应用需求(信息要求和处理要求)。在数据库领域内,常常把使用数据库的各类系统统称为数据库应用系统。
3992 0
一文带你了解数据库设计基础
|
网络协议 测试技术 Windows
Switchhosts工具的使用
Switchhosts工具的使用
731 0