Vue选项之mixins混入

最新推荐文章于 2023-04-19 14:19:32 发布

庚中

最新推荐文章于 2023-04-19 14:19:32 发布

阅读量338

点赞数 1

分类专栏：十二.vue 文章标签： Vue选项之mixins混入

本文链接：https://blog.csdn.net/xiaodi520520/article/details/88826016

版权

十二.vue 专栏收录该内容

60 篇文章 6 订阅

订阅专栏

mixins一般有两种用途:1.当你已经写好了构造器之后,需要增加方法或者临时的活动时使用的方法,这是用混入会减少源代码的污染;下面的需求是构造器已经完成,突然要额外增加控制台打印变化的数据,操作如下:<body> <div id="app"> {{num}} <p><button @click="add"&g...

摘要由CSDN通过智能技术生成

mixins一般有两种用途:

1.当你已经写好了构造器之后,需要增加方法或者临时的活动时使用的方法,这是用混入会减少源代码的污染;

下面的需求是构造器已经完成,突然要额外增加控制台打印变化的数据,操作如下:

<body>
    <div id="app">
        {{num}}
        <p><button @click="add">ADD</button></p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
    //2,声明一个对象
      let addConsole={
          updated:function(){//updated是Vue生命周期
            console.log("数据变化了,新值为"+this.num); 
          }
      }
      let app = new Vue({
        el: '#app',
        data:{
            num:1
        },
        methods:{
            add(){
                this.num++;
            }
        },
        updated() {
            console.log("我是原生的生命周期");//发现会比混入慢
            
        },
        //1.增加混入写法
        mixins:[addConsole]//跟一个数组
      })
    </script>
  </body>

官网也有介绍:
在这里插入图片描述
需要注意一点是:混入的生命周期构子会比原生的先执行.

2.定义全局的混入,这样在需要这段代码的地方直接引入js,就可以实现这个功能了,全局的引入操作如下:

Vue.mixin({
	updated:function(){
	 console.log("我是全局的混入");
	}
})

注意：全局混入的执行顺序要前于混入和构造器里的方法

最后完整代码:


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>lianxi</title>
  </head>
  <body>
    <div id="app">
        {{num}}
        <p><button @click="add">ADD</button></p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      let addConsole={
          updated:function(){//updated是Vue生命周期
            console.log("数据变化了,新值为"+this.num);
            
          }
      }
    //   全局的混入,速度最快
    Vue.mixin({//不用s
        updated:function(){
            console.log("我是全局的混入");
            
        }
    })

      let app = new Vue({
        el: '#app',
        data:{
            num:1
        },
        methods:{
            add(){
                this.num++;
            }
        },
        updated() {
            console.log("我是原生的生命周期");//发现会比混入慢
            
        },
        //混入写法
        mixins:[addConsole]
      })
    </script>
  </body>
</html>

实现效果:
在这里插入图片描述

庚中

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue选项之mixins混入

mixins一般有两种用途:1.当你已经写好了构造器之后,需要增加方法或者临时的活动时使用的方法,这是用混入会减少源代码的污染;下面的需求是构造器已经完成,突然要额外增加控制台打印变化的数据,操作如下:<body> <div id="app"> {{num}} <p><button @click="add"&g...
复制链接

扫一扫

专栏目录