vue的方法调用、计算、监听的用法和区别

最新推荐文章于 2024-05-20 17:02:17 发布

杨不旧

最新推荐文章于 2024-05-20 17:02:17 发布

阅读量819

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_45152044/article/details/123020437

版权

vue 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

前言

建议先看vue入门及常用指令再看本文章，可直接查看笔者的vue专栏

方法的调用

如果把放法直接写在{{}}，那么页面中，只要数据发生变化，都会调用。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    </style>
</head>
<body>
    <div id="app">
        <input type="text" v-model="msg">
        <span>{{msg}}</span>
        <span>{{fn()}}</span>
    </div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            msg:''
        },
        methods: {
            fn:function(){
                console.log(1);
            }
        }
    })
</script>

运行代码，打开控制台，当你在输入框输入的时候，由于msg数据发生变化，fn函数也会被执行

计算

只有当计算中用到的数据发生了变化，才会执行。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    </style>
</head>
<body>
    <div id="app">
        <input type="text" v-model="msg">
        <span>{{msg}}</span>
        <button @click="clickfn">a++</button>
        <span>{{fn}}</span>
    </div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            msg:'',
            a:1
        },
        methods: {
            clickfn:function(){
                this.a++
            },
        },
        computed: {
            fn:function(){
                alert(this.a)
            }
        }
    })
</script>

效果：页面一加载便会弹出一次弹框，当在文本框输入东西时候，页面数据发生变化，但警告框不会弹出。点击按钮后，警告框弹出。

方法调用和计算两者共同点：页面初始化加载会执行一次
不同点：方法调用，页面数据发生变化就会执行一次，而计算只有在其内部的数据发生变化才会执行。

不同场景如何选中用方法调用还是计算？
我们平常不会在{{}}使用方法，除非时刻要加载，可以提高性能

监听

1、监控某个数值是否发生变化,一旦发生变化就会执行。
2、默认情况下无法兼容到数组或者对象里面的数组发生变化，层次太深而检测不到，如数组里面有个json对象，或者数组里有json对象，该json对象还有给数组
3、且一页面初始化加载并不会计算一次。但可以修改一些参数的值来达到深层次检测和页面初始化加载就进行一次。

示例写法：（不是完整的例子）

<script>
    new Vue({
        el:'#app',
        data:{
        },
        methods:{
        },
         computed:{
        },
        watch:{//默认情况下无法兼容到数组或者对象里面的数据发生变化

            list:{
                handler:function(){
                },
                deep:true, //是否深度监听，true为是
                immediate:true //初始的时候先运算一次
            }
        }
    })
</script>

计算和监听区别

共同点：实质基本都是一样的，一上来都可以先执行一次，都是内部数据发生变化后执行。
不同点：一般情况下都用计算。只有在里面是异步操作的时候再用监听，如ajax请求、定时器（setTimeOut、setInterval）都是异步的，而计算里面不能用异步。

杨不旧

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue的方法调用、计算、监听的用法和区别

前言建议先看vue入门及常用指令再看本文章，可直接查看笔者的vue专栏方法的调用如果把放法直接写在{{}}，那么页面中，只要数据发生变化，都会调用。示例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="
复制链接

扫一扫