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语法及点击事件
     
{{title}}
这种在页面上数据不会渲染出来 {{state1.c}}要用这种进行渲染 {{state1.cc}}要用这种进行渲染

{{item.balance_deal}}---ref

{{item.aa}}---ref

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语法及点击事件
     
{{title}}
这种在页面上数据会渲染出来,但是不是响应式的,数据修改好后,页面不会立刻改变视图,需要刷新的时候,才可以显示 {{c}}要用这种进行渲染 {{cc}}这种新增加的属性,没有在视图渲染出来,打印后,内存中显示有数据

{{item.balance_deal}}---reactive

{{item.aa}}---reactive

这里的视图会渲染出来
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声明的变量及监听多个变量



  • 模块化,如果我们想要在多个组件中进行一个方法复用的话,我们会怎么选择呢?
  • 在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
  }
}
在页面中直接写就可以了

  • 封装的函数
  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;


在使用的页面中进行调用


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


    vue3.0语法的一些总结_第1张图片
    image.png
  • 这是我学习技术胖的vue3.0+ts中的,你们也可以去学习下!

你可能感兴趣的:(vue3.0语法的一些总结)