vue3.0语法的一些总结

今天我在下载脚手架的时候发现，可以下载Vue3.0的脚手架了，注意：里面可以使用vue2.0的语法，也可以使用vue3.0的语法，而vue3.0的语法不需要我们再去下载并引入@vue/composition-api，我们直接使用ref或者是reactive的时候，脚手架会自动的帮助我们引入，这一点很nice
首先介绍的是生命周期
Vue2.0==========》Vue3.0
beforeCreate=====》setup
created==========》setup
beforeMount======》onBeforeMount
mounted=========》onMounted
beforeUpdate===== 》onBeforeUpdate
updated========= 》onUpdated
beforeDestroy==== 》onBeforeUnmount
destroy========= 》onUnmounted
ref和reactive的区别
ref：创建一个包装式对象，含有一个响应式属性value（我在百度上看到有的人说，ref只可以监听简单的数据，如数字、字符串、布尔值等，但是我用代码测了一下，他跟reactive的写法可以是一样的，而且他是在新建对象外在创建一个属性可以视图显示的，而reactive内存显示但是视图不更新，有不同意见的，欢迎留言！）
reactive：创建一个响应式对象，非包装类，相当于data
我们在来看他们的写法上有何不同
ref语法及点击事件

     <h5>{{title}}</h5>这种在页面上数据不会渲染出来
     <mark>{{state1.c}}</mark>要用这种进行渲染
     <mark>{{state1.cc}}</mark>要用这种进行渲染
     <button @click="refXg()">点击修改ref数据</button>
     <block v-for="item in timer1.data" :key="item.balance_id">
       <p>{{item.balance_deal}}---ref</p>
       <p>{{item.aa}}---ref</p>
     </block>
     <button @click="xg()">点击</button>
  import { reactive , toRefs , ref } from 'vue'//这个脚手架会自动生成，没有生成的话，你可以自己加上
  export default {
      setup(){
           let state1=ref({声明变量
                   b:666,
                   c:false
              })；
            这是方法的写法
            let refXg=()=>{
                  state1.value.c=!state1.value.c;点击按钮的时候，属性值发生改变==》可以输出
                  state1.value.cc=123;点击按钮的时候，给这个变量新增一个cc的属性，视图可以渲染出来
                  console.log(state1);//打印输出，属性都有
              }
             const timer1=ref({
                    "code":"000",
                     "msg":"成功",
                     "data":[{
                          "flg":1,
                          "deal_time":"2020-08-03 09:26:32",
                          "balance_deal":"+100.00",
                          "balance_id":1,
                        },
                      { "flg":0,
                        "deal_time":"2020-07-31 17:24:01",
                        "balance_deal":"-500.00",
                        "balance_id":1,
                      },
                      { "flg":1,
                        "deal_time":"2020-07-31 17:12:10",
                        "balance_deal":"+1000.00",
                        "balance_id":1,
                      }],
                    "suc":true
                    });
         let xg=()=>{点击按钮的时候，给数据中添加一个aa为false的属性
                timer1.value.data.forEach(v=>{
                v.aa=false;
                })
               }
             return{
                state1，必须要有返回值，而且是直接返回变量
                title:state1.value.c,这种在页面上不会渲染，写法错误
                refXg，返回方法
                timer1，
                xg
              }

        }

    }

reactive语法及点击事件

     <h5>{{title}}</h5>这种在页面上数据会渲染出来，但是不是响应式的，数据修改好后，页面不会立刻改变视图，需要刷新的时候，才可以显示
     <mark>{{c}}</mark>要用这种进行渲染
     <mark>{{cc}}</mark>这种新增加的属性，没有在视图渲染出来，打印后，内存中显示有数据
     <button @click="refXg()">点击修改reactive数据</button>
     <block v-for="item in data" :key="item.balance_id">
       <p>{{item.balance_deal}}---reactive</p>
       <p>{{item.aa}}---reactive</p>这里的视图会渲染出来
     </block>
     <button @click="xg()">点击</button>
  import { reactive , toRefs , ref } from 'vue'//这个脚手架会自动生成，没有生成的话，你可以自己加上
  export default {
      setup(){
           let state=reactive({声明变量
                   b:666,
                   c:false
              })；
            这是方法的写法
            let refXg=()=>{
                  state.c=!state1.c;点击按钮的时候，属性值发生改变==》可以输出
                  state.cc=123;点击按钮的时候，给这个变量新增一个cc的属性，视图不会渲染出来
                  console.log(state);//打印输出，属性都有
              }
             const timer=reactive({
                    "code":"000",
                     "msg":"成功",
                     "data":[{
                          "flg":1,
                          "deal_time":"2020-08-03 09:26:32",
                          "balance_deal":"+100.00",
                          "balance_id":1,
                        },
                      { "flg":0,
                        "deal_time":"2020-07-31 17:24:01",
                        "balance_deal":"-500.00",
                        "balance_id":1,
                      },
                      { "flg":1,
                        "deal_time":"2020-07-31 17:12:10",
                        "balance_deal":"+1000.00",
                        "balance_id":1,
                      }],
                    "suc":true
                    });
         let xg=()=>{点击按钮的时候，给数据中添加一个aa为false的属性
                timer1.data.forEach(v=>{
                v.aa=false;
                })
               }
             return{必须要有返回值，而且是直接返回变量
                ...toRefs(state)，这种写法是响应式的，并且可以直接输出属性名
                title:state.c,在页面上可以进行输出，但是不是响应式的，发生改变后,视图不发生改变
                refXg，返回方法
                ...toRefs( timer)，
                xg,
                ...state,这种写法也可以渲染，但是也不是响应式的渲染
              }

        }

    }

传值：provide(“a”,值)，在子组件中通过const b=inject("a");return{b},他只能是在页面开始就传值了，在点击事件中是不可以进行传值的，控制台显示只能在setup内部进行使用，还有在我们的业务场景中，好像也是不需要的，或者可以用其他的方式进行传参
补充：vue3.0中新增的两个钩子函数

import { onRenderTracked, onRenderTriggered } from 'vue'
在setup中写这两个事件
// 这是状态触发，就是你点击或者是那个数据变化，就会打印出来，只有当前触发的，会将新的value值和旧的value都打印
    // 相比下面的钩子函数，这个更精准一些
    onRenderTriggered((e)=>{
      console.log(e);
    })
    // 状态跟踪钩子函数，只要页面上的数据发生改变就会进行触发
    onRenderTracked((event)=>{
      console.log(event);
    });

watch监听ref及reactive声明的变量及监听多个变量

<template>
  <div class="about">
    <h1>watch监听的使用</h1>
    <ul>
      <li>{{overText}}</li>
      <li>{{overText1}}</li>
      <li v-for="(item,index) in list" :key="index">
        <button @click="check(index)">{{item}}</button>
      </li>
      <li>你的选择是【{{user}}】</li>
      <li><button @click="overActive">点餐完毕</button></li>
    </ul>
  </div>
</template>
<script lang="ts">
import { ref, defineComponent, reactive, toRefs, watch } from 'vue'
export default defineComponent({
  name:'about',
  setup(){
    const overText=ref('红浪漫');
    const overText1=ref('红浪漫1');
    const overActive=()=>{
      overText.value=overText.value+'点餐完成！';
      overText1.value='ref'
      // document.title=overText.value;
    }
    const msg=reactive({
      list:['小红','小明','小王'],
      user:'',
      check:(index: number)=>{
        msg.user=msg.list[index]
      }
    })
    //监听多个值得时候，使用数组形式，reactive中的值使用函数写法,ref的可以直接写
    watch([overText,overText1,()=>msg.user],(newValue,oldValue)=>{
      console.log(`new--->${newValue}`);
      console.log(`old--->${oldValue}`);
      document.title = newValue[0];
    })
    return{
      overText,
      overText1,
      overActive,
      ...toRefs(msg)
    }
  }
})
</script>

模块化，如果我们想要在多个组件中进行一个方法复用的话，我们会怎么选择呢？
在vue2.x中我们可能会使用mixin，在vue3.x中，看代码

直接新建一个文件夹userNowTime.js吧，这是我们写的公共的方法
  import { ref } from "vue";

const nowTime = ref("00:00:00");
const getNowTime = () => {
    const now = new Date();
    const hour = now.getHours() < 10 ? "0" + now.getHours() : now.getHours();
    const minu =
        now.getMinutes() < 10 ? "0" + now.getMinutes() : now.getMinutes();
    const sec =
        now.getSeconds() < 10 ? "0" + now.getSeconds() : now.getSeconds();
    nowTime.value = hour + ":" + minu + ":" + sec;

    setTimeout(getNowTime, 1000);
};

export { nowTime, getNowTime }
在about.vue中引入
import {nowTime, getNowTime} from '../assets/userNowTime'；
要注意：我们一定要在setup中将我们的方法及变量在return出去，否则会不显示
setup(){
  return{
    nowTime,getNowTime
  }
}
在页面中直接写就可以了
<template>
<mark>{{nowTime}}</mark>
<button @click="getNowTime">开始时间</button>
</template>

封装的函数

  import { ref } from 'vue';
import axios from 'axios';
function userUrlAxios(url: string){
    const result=ref(null);//存储数据
    const loading=ref(true);//显示loading
    const loaded=ref(false);//是否显示图片
    const error=ref(null);//报错提示

    axios.get(url).then(res=>{
        loading.value=false;
        loaded.value=true;
        result.value=res.data;
    }).catch(e=>{
        error.value=e;
        loading.value=false;
    })
    return{
        result,
        loaded,
        loading,
        error
    }
}
export default userUrlAxios;


在使用的页面中进行调用
<template>
    <div>
        <p>我是test页面</p>
        <p>{{title}}</p>
        <p>{{msg}}</p>
        <div v-if="loading">Loading.....</div>
        <img v-if="loaded" :src="result.message" />
    </div>
</template>
<script lang="ts">
import Vue, { defineComponent, onMounted, ref} from 'vue';
import userUrlAxios from '../assets/userAxios';
export default defineComponent({
    name:'test',
    setup(){
        const title=ref('欢迎光临红浪漫洗浴中心');
        const msg=ref('随机出现一张狗狗的图片');
        const { loading, loaded, result} =userUrlAxios("https://dog.ceo/api/breeds/image/random");
        return {
            title,
            msg,
            loading, loaded, result
        }
    }
})
</script>

在脚手架中进行全局注册组件，怎么注册呢？
首先跟我们的vue2.0一样，在components文件下新建一个.vue文件，在main.js中进行引入

image.png
这是我学习技术胖的vue3.0+ts中的，你们也可以去学习下！

vue3.0语法的一些总结

首先介绍的是生命周期

ref和reactive的区别

补充：vue3.0中新增的两个钩子函数

watch监听ref及reactive声明的变量及监听多个变量

模块化，如果我们想要在多个组件中进行一个方法复用的话，我们会怎么选择呢？

封装的函数

在脚手架中进行全局注册组件，怎么注册呢？

这是我学习技术胖的vue3.0+ts中的，你们也可以去学习下！