vue 3 学习

[sailei1]

event bus

//使用 mitt npm install mitt -save-dev

  // v_event.js
  import mitt from 'mitt'
  export default mitt()
  //使用 与原来一样
  v_event.on('plus',()=>{console.log('plus')})
  v_event.emit('plus')

[sailei1]

Composition API 原来 一般都添加功能都是添加组件，添加data字段，而 组合式api 相当于把功能代码一一抽象出来，然后导入，有利于代码复用，查看相关逻辑处理

[sailei1]

ref 是对我们的值创建了一个响应式引用， reactive 是对object 创建了一个响应式引用 readonly 不能修改响应式引用 toRefs 对响应式引用取值

const book = reactive({
  author: 'Vue Team',
  year: '2020',
  title: 'Vue 3 Guide',
  description: 'You are reading this book right now ;)',
  price: 'free'
})

let { author, title } = toRefs(book)

[sailei1]

watchEffect(() => console.log(count.value))//值发生变化时 就自动执行，组件卸载时自动停止

watch 跟原来一样 ，不过现在可以同时侦听多个源

[sailei1]

vuex 使用

import {computed} from 'vue';
import {useStore} from 'vuex';
export default {
    name: 'about',
    setup() {
        const store = useStore();
        const count = computed(() => {
            return store.state.count;
        });

        function handleIncrement() {
            store.commit('increment');
        }
        function handleDecrement() {
            store.commit('decrement');
        }

        console.log('store :>> ', store);
        return {
            count,
            handleIncrement,
            handleDecrement
        };
    }
};