学习vue3+ composition API笔记 第一天

setup函数

setup()函数是compositionAPI统一入口，执行时间在生命周期的beforeCreate和created之间
这个东西没弄懂`

<script>
// @ is an alias to /src

import { ref } from "vue";
export default {
  name: "Home",
  data() {
    return {
      // num: 123
    };
  },
  setup() {
    let num = ref(0);
    let numAdd = function() {
      ++num.value;
    };
    return { num, numAdd };
  },
  beforeCreate(){
    console.log(this.num,'beforeCreate');
  },
  created(){
    console.log(this.num,'created');
  },
  mounted() {
    console.log(this.num,'mounted');
  },
};
</script>

接收两个参数（props、context），在使用setup()函数一定要return回去才能获取到函数内部值！！！

composition API优势

代码复用，目前使用我使用的都是混入（mixin）和插槽（v-slot）

mixin混入

import mixinIndex from './mixins/index'

export default {
  mixins: [mixinIndex]
}

不知道组件多了什么东西和功能，还可能名字出现冲突 ，覆盖的问题。

v-slot插槽

<template>
  <Counter v-slot="{ count, clickFn }">
     {{ count }}
    <button @click="clickFn">Increment</button> 
  </Counter> 
</template>

因为使用的是插槽，只能通过v-slot访问对应属性，这样很容易理解代码，但是只能在对应的范围（如：counter组件）中使用。

composition API

//composition
import {ref} from 'vue'
function increase() {
	// 声明响应式数据count，值为0
    const count = ref(0)
    // 创建方法add
    const add = () => {
        count.value ++
    }
    // 导出数据和方法，便于外界访问
    return {
        count,
        add
    }
}
export {increase}

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
import { ref } from "vue";
import {increase} from '../compositon/index'
export default {
  name: "Home",
  data() {
    return {
      // num: 123
    };
  },
  setup() {
    const {count,add} = increase()
    console.log(count,add);
    return {count,add}
  },
  // console.log(this.num);

  methods: {
    // numAdd(){
    //   this.num+=1
    // }
  },
  beforeCreate(){
    console.log(this.count,'beforeCreate');
  },
  created(){
    console.log(this.count,'created');
  },
  mounted() {
    console.log(this.count,'mounted');
  },
  components: {
    HelloWorld,
  },
};
</script>

我们不受模板和组件范围的限制，并且确切地知道我们访问哪些属性。