vue3.0的CompositionAPI

setup

setup代替了vue2.0生命周期中setup的beforeCreate和create

<script>
export default{
  //setup最先执行,可以放置数据，方法等
   created(){
    console.log("67777");
  },
  setup(){
    console.log("执行啦~~~~");
  },
  beforeCreate(){
    console.log("beforeCreate");
  },
}
</script>

reactive

<template>
  <div class="app">
    <div>{{ car.name }}----{{ car.price }}</div>
    <button @click="car.brand = '布加迪'">修改</button>
  </div>
</template>

<script>
import { reactive } from 'vue'
export default {
  setup() {
    // 1. setup需要返回值， setup中返回的值才能使用
    // 2. reactive中传入一个普通对象(用于存放数据的对象)，返回一个代理对象;亦然数据不可显示，而且会报错
    const car = reactive({
      name: '保时捷',
      price: 1000
    })
    return {
      car
    }
  }
}
</script>

ref

<template>
    <div class="app">
      <div>价格--：{{money}}</div>
      <button @click="money++">++</button>
    </div>
</template>

<script>
// import {reactive} from 'vue'
import {ref} from 'vue'
export default{
  setup(){
    // ref可以存放简单的数据类型，返回一个响应式对象
    const money = ref(100)
    return {
      money
    }
  },
}
</script>

toRef

<template>
  <div class="app">
    <div>金钱改变：{{ money }}</div>
    <div>{{ car.brand }} --- {{ car.price }}</div>
    <button @click="money++">修改</button>
  </div>
</template>

<script>
import { reactive, toRefs } from 'vue'
export default {
  setup() {
    const state = reactive({
      money: 100,
      car: {
        brand: 'bsj',
        price: 9999999999
      },
    })
    return {
      //toRefs主要是可以让数据变成动态的
      ...toRefs(state)
    }
  }
}
</script>

readonly

<template>
  <div class="app">
    <div>{{ money }}</div>
    <button @click="money++">++</button>
  </div>
</template>
<script>
import { readonly, ref } from "vue";
export default {
  setup() {
    const money = ref(100);
    return {
      //固定数据
      money: readonly(money),
    };
  },
};
</script>

computed

<template>
  <div class="app">
    <input type="text" v-model="age" /><br />
    <input type="text" v-model="nextAge" /><br />
    <input type="text" v-model="nextAge2"> 
  </div>
</template>
<script>
import { computed, ref } from "vue";
export default {
  setup() {
    const age = ref(100);
    //只能监听，不能修改
    const nextAge = computed(() => {
      return parseInt(age.value) + 1;
    });
    //get 获取，set 设置
    const nextAge2 = computed({
      get() {
        return parseInt(age.value) + 2;
      },
      set(v) {
        //对原来的数据进行设置
        age.value = v - 2;
      },
    });
    return {
      //固定数据
      age,
      nextAge,
      nextAge2
    };
  },
};
</script>

watch

<template>
  <div class="app">
    <div>{{ money }}</div>
    <div>{{ car.brand }}</div>
    <button @click="money++">按钮1</button>
    <button @click="car.brand = '大众'">按钮2</button>
  </div>
</template>

<script>
import { toRefs, watch, reactive } from 'vue'
export default {
  setup() {
    const state = reactive({
      money: 100,
      car: {
        brand: '法拉利'
      }
    })
    watch(
      state,
      (value) => {
        console.log('数据变化了', value)
      },
      {
        deep: true
      }
    )
    // watch用于实现监听
    return {
      ...toRefs(state)
    }
  }
}
</script>

provide和inject

父组件

<template>
  <div class="app">
    <h2>{{ money }}</h2>
    <Son :money="money"></Son>
  </div>
</template>

<script>
import Son from './Son'
import { ref,provide } from 'vue'
export default {
  components: {
    Son
  },
  setup() {
    const money = ref(100)
    const chengMoney = (n)=>{
      money.value = n
    }
    // 组件提供了money属性
    provide('money', money)
    provide('chengMoney', chengMoney)
    return {
      money
    }
  }
}
</script>

子组件

<template>
  <div class="son">
    <div>我是子组件---{{money}}</div>
    <Grandchildren></Grandchildren>
  </div>
</template>

<script>
import Grandchildren from "./Grandchildren"
import { inject } from 'vue'
export default {
   components: {
    Grandchildren
  },
  setup() {
    const money = inject('money')
    return {
      money
    }
  }
  
}
</script>

孙子组件

<template>
  <div class="grandchildren">
    <div>我是孙子组件---{{money}}</div>
    <button @click="fn">修改</button>
  </div>
</template>

<script>
import { inject } from 'vue'
export default {
  setup() {
    const money = inject('money')
    const chengMoney = inject("chengMoney") 
    const fn = ()=>{
        chengMoney(5000)
    }
    return {
      money,
      fn
    }
  }
}
</script>

注:为了方便看效果，可以直接复制在vue3.0里面