vue中minxin和hooks区别

1、Mixins 代码:

const myMixin = {
  data() {
    return {
      count: 0
    };
  },
  
  mounted() {
    console.log('Component mounted');
  },
  
  computed: {
    doubleCount() {
      return this.count * 2;
    }
  },
  
  methods: {
    increment() {
      this.count++;
    }
  }
};
 
export default {
  mixins: [myMixin]
}

2、hooks代码

import { ref, onMounted, computed } from 'vue';
 
export default {
  setup() {
    const count = ref(0);
    
    onMounted(() => {
      console.log('Component mounted');
    });
    
    const doubleCount = computed(() => count.value * 2);
    
    function increment() {
      count.value++;
    }
    
    return {
      count,
      doubleCount,
      increment
    };
  }
}

Mixins 是vue2的用法,通过对象的方式进行定义和应用,在组件中的属性和方法会与组件本身的属性和方法进行合并,可能会导致命名冲突或不可预料的行为。

Hooks 是vue3的用法,使用函数的方式定义和使用,可以将相关的逻辑和状态封装为自定义的 Hook 函数,相对来说更安全。

相关推荐
y先森25 分钟前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy25 分钟前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu108301891128 分钟前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿2 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡3 小时前
commitlint校验git提交信息
前端
天天进步20153 小时前
Vue+Springboot用Websocket实现协同编辑
vue.js·spring boot·websocket
虾球xz3 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇3 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒3 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员3 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js