初识Composition-API

Composition-API基本用法

<template>
  <div>
    <p>{{count}}</p>
    <button @click="myFn">按钮</button>
  </div>
</template>

<script>
  import {ref} from 'vue';
export default {
  name: 'App',
  // setup函数是组合API的入口函数
  setup(){
    // let count = 0;
    // 定义了一个名称叫做count变量, 这个变量的初始值是0
    // 这个变量发生改变之后, Vue会自动更新UI
    let count = ref(0);
    // 在组合API中, 如果想定义方法, 不用定义到methods中, 直接定义即可
    function myFn() {
      // alert(123);
      // console.log(count.value);
      count.value += 1;
    }
    // 注意点:
    // 在组合API中定义的变量/方法, 要想在外界使用, 必须通过return {xxx, xxx}暴露出去
    return{count, myFn}
  }
}
</script>

<style>

</style>

Composition-API抽取

<template>
  <div>
    <ul>
      <li v-for="(stu, index) in state.stus"
          :key="stu.id"
          @click="remStu(index)">
        {{stu.name}} - {{stu.age}}
      </li>
    </ul>
  </div>
</template>

<script>
  import {reactive} from 'vue';
export default {
  name: 'App',
  setup() {
    /*
    // ref函数注意点:
    // ref函数只能监听简单类型的变化, 不能监听复杂类型的变化(对象/数组)
    let state = reactive({
      stus:[
        {id:1, name:'zs', age:10},
        {id:2, name:'ls', age:20},
        {id:3, name:'ww', age:30},
      ]
    });
    function remStu(index) {
      state.stus = state.stus.filter((stu, idx) => idx !== index);
    }
     */
    let {state, remStu} = useRemoveStudent();

    return {state1, remStu}
  }
}
function useRemoveStudent() {
  let state = reactive({
    stus:[
      {id:1, name:'zs', age:10},
      {id:2, name:'ls', age:20},
      {id:3, name:'ww', age:30},
    ]
  });
  function remStu(index) {
    state.stus = state.stus.filter((stu, idx) => idx !== index);
  }
  return {state, remStu};
}
</script>

<style>

</style>

Composition-API组合

<template>
  <div>
    <form>
      <input type="text" v-model="state2.stu.id">
      <input type="text" v-model="state2.stu.name">
      <input type="text" v-model="state2.stu.age">
      <input type="submit" @click="addStu">
    </form>
    <ul>
      <li v-for="(stu, index) in state.stus"
          :key="stu.id"
          @click="remStu(index)">
        {{stu.name}} - {{stu.age}}
      </li>
    </ul>
  </div>
</template>

<script>
  import useRemoveStudent from './rem';
  import useAddStudent from './add';
export default {
  name: 'App',
  setup() {
    let {state, remStu} = useRemoveStudent();
    let {state2, addStu} = useAddStudent(state);
    return {state, remStu, state2, addStu}
  }
}
/*
function useAddStudent(state) {
  let state2 = reactive({
    stu:{
      id:'',
      name:'',
      age:''
    }
  });
  function addStu(e) {
    e.preventDefault();
    const stu = Object.assign({}, state2.stu);
    state.stus.push(stu);
    state2.stu.id = '';
    state2.stu.name = '';
    state2.stu.age = '';
  }
  return {state2, addStu}
}
function useRemoveStudent() {
  let state = reactive({
    stus:[
      {id:1, name:'zs', age:10},
      {id:2, name:'ls', age:20},
      {id:3, name:'ww', age:30},
    ]
  });
  function remStu(index) {
    state.stus = state.stus.filter((stu, idx) => idx !== index);
  }
  return {state, remStu};
}
*/
</script>

<style>

</style>

Composition-API本质

<template>
  <div>
    <p>{{name}}</p>
    <button @click="myFn1">按钮</button>
    <p>{{age}}</p>
    <button @click="myFn2">按钮</button>
  </div>
</template>

<script>
  /*
  1.Composition API 和Option API混合使用
  2.Composition API本质 (组合API/注入API)
  3.setup执行时机
  4.setup注意点
  * */
  import {ref} from 'vue';
export default {
  name: 'App',
  data: function(){
    return {
      name: 'lnj',
      // age: 18
    }
  },
  methods:{
    myFn1(){
      alert('abc');
    },
    // myFn2() {
    //   alert('www.it666.com');
    // }
  },
  setup() {
    let age = ref(18);
    function myFn2() {
      alert('www.it666.com');
    }
    return {age, myFn2}
  }
}
</script>

<style>

</style>