vue3的基本使用

Posted 2021-07-08 fengshaopu

vue2的生命周期函数跟vue3生命周期函数的变化
我们vue3导入生命周期钩子的方式是这样的：

除去 beforeCreate 和 created 之外，在我们的 setup 方法中，有9个旧的生命周期钩子，我们可以在setup 方法中访问
onBeforeMount
onMounted
onBeforeUpdate
onUpdated
onBeforeUnmount
onUnmounted
onActivated
onDeactivated
onErrorCaptured
onRenderTracked // vue3新增加
onRenderTriggered // vue3新增加
命名上在vue2.x的基础上加上on前缀,以驼峰命名方式命名.

变化过程:

beforeCreate -> use setup()
created -> use setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
errorCaptured -> onErrorCaptured

import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, onActivated, onDeactivated, onErrorCaptured } from 'vue'

使用vue3
首先要知道这些：

使用defineComponent 构建应用及绑定事件
使用setup(props,content)父子通信
使用 reactive 绑定数据
使用 ref ( torefs ) 绑定数据
使用 getCurrentInstance 获取当前实例化对象上下文信息
watch、watchEffect 数据监听
生命周期+axios数据请求

1.使用defineComponent 构建应用及绑定事件
在exprot default 后面添加上 defineComponent

<script>
import {defineComponent } from 'vue'
export default defineComponent({
  name: '',
  data() {
    return {};
  },
  mounted() {},
  methods: {},
  computed: {},
  watch: {},
})
</script>

2.使用setup跟reactive 绑定数据

<template>
  <div>
{{f}}
  </div>
</template>


<script>
import {defineComponent, reactive } from 'vue'
export default defineComponent({
setup(){
 var data= reactive({
    f:'w '
  })
  return data
}
})
</script>

使用onMounted 钩子函数跟 点击事件

<template>
  <div>
    {{ data.f }}
    {{ data.shu }}
    <!-- <button @click="sh">en</button> -->
    <span ref="desc"></span>
  </div>
</template>

<script>
import {
  defineComponent,
  reactive,
  onMounted,
  ref,
  watch,
  onUnmounted
} from "vue";
export default defineComponent({
  setup() {
    var data = reactive({
      f: "w ",
      shu: 1
    });
    // var sh=()=>{
    //   data.shu++
    // }
    // var time;

    onMounted(() => {
     var  time = setInterval(() => {
        data.shu++;
      }, 1000);
    });

    // onUnmounted(() => {
    //   clearInterval(time);
    // });

    // var desc = ref(null);
    var desc = ref(null);
    console.log(desc);
    watch(
      () => data.shu,
      (val, oldVal) => {
        var p = desc.value;
        console.log(p);
        p.textContent = `conter change from ${oldVal} to ${val}`;
      }
    );
    return { data, desc };
  }
});
</script>

3.生命周期+axios数据请求
下载axios

npm install axios --save
在局部导入
import axios from “axios”

<template>
  <div>
    {{ data.f }}
    {{ data.shu }}
    <!-- <button @click="sh">en</button> -->
    <span ref="desc"></span>
  </div>
</template>

<script>
import axios from 'axios'
import {
  defineComponent,
  reactive,
  onMounted,
  ref,
  watch,
  onUnmounted
} from "vue";
export default defineComponent({
  setup() {
    var data = reactive({
      f: "w ",
      shu: 1
    });
    // var sh=()=>{
    //   data.shu++
    // }
    // var time;

    onMounted(() => {
     var  time = setInterval(() => {
        data.shu++;
      }, 1000);
    axios("https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata").then((res)=>{
        console.log(res);
      })
    });

    // onUnmounted(() => {
    //   clearInterval(time);
    // });

    // var desc = ref(null);
    var desc = ref(null);
    console.log(desc);
    watch(
      () => data.shu,
      (val, oldVal) => {
        var p = desc.value;
        console.log(p);
        p.textContent = `conter change from ${oldVal} to ${val}`;
      }
    );
    return { data, desc };
  }
});
</script>