vue Mixins混入选项操作

最新推荐文章于 2023-01-09 11:57:58 发布

weixin_43177685

最新推荐文章于 2023-01-09 11:57:58 发布

阅读量256

点赞数 1

文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_43177685/article/details/118573042

版权

Mixins一般有两种用途：

1、在你已经写好了构造器后，需要增加方法或者临时的活动时使用的方法，这时用混入会减少源代码的污染。

2、很多地方都会用到的公用方法，用混入的方法可以减少代码量，实现代码重用。

Mixins的基本用法：

我们现在有个数字点击递增的程序，假设已经完成了，这时我们希望每次数据变化时都能够在控制台打印出提示：“数据发生变化”。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="./assets/js/vue.min.js"></script>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mixins Option Demo</title>
</head>
<body>
    <!-- 例子：我们现在有个数字点击递增的程序，假设已经完成了，这时我们希望每次数据变化时都能够在控制台打印出提示：“数据发生变化”. -->
    <h1>Mixins Option Demo</h1>
    <hr>
    <div id="app">
        <p>{{ num }}</p>
        <p><button @click="add">增加数量</button></p>
    </div>

    <script type="text/javascript">
    // 全局混入的执行顺序要前于混入和构造器里的方法。
    Vue.mixin({
        updated:function(){
            console.log('我是全局被混入的');
        }
    })

    var addLog = {
        updated: function() {
            console.log("数据发生变化，变化成"+this.num+".");
        }
    }
    var app = new Vue({
        el: '#app',
        data: {
            num: 1
        },
        methods: {
            add: function () {
                this.num++;
            }
        },
        updated: function(){
            console.log("构造器里的updated方法。")
        },
        mixins:[addLog] //混入
    })

    // 注意：
    // 从执行的先后顺序来说，都是混入的先执行，然后构造器里的再执行，需要注意的是，这并不是方法的覆盖，而是被执行了两边。
    // 当混入方法和构造器的方法重名时，混入的方法无法展现，也就是不起作用。

    </script>
    
</body>
</html>

当点击增加数量按钮，num数值会发生变化，

运行界面：