初识Vue3

目录

创建实例

Vue3生命周期

响应式基础

为什么要使用 ref?

声明响应式状态

ref()和reactive()

toRef()和toRefs()


创建实例

通过对Vue2的学习,我们可以这样在Vue2中创建一个实例:

var vm = new Vue({
  // 选项
})

或者通过Vue全局api   Vue.extend() 返回一个Vue构造器来创建一个实例:

new Profile = Vue.extend({
    // 选项
})
new.Profile().$mount()

在Vue3中我们使用 createApp 来创建一个新的应用实例:

    <div id="app"></div>
    <script>
      const { createApp } = Vue
      let box = createApp({
        // 选项
      });
      box.mount('#app')
    </script>

在Vue2中,我们创建实例选项中通常是这样写的

在Vue3中,我们使用setup()函数来做Vue3的入口,这个函数相当于Vue2生命周期中beforeCreate和created的结合。使用ref()来声明响应式状态,ref()接收参数,并将其包裹在一个带有.value属性的

ref对象中返回。如果使用setup钩子,需要使用return把响应式暴露给模版。

    <div id="app">
      {{ msg }}
    </div>
    <script>
      const { createApp, ref } = Vue
      let box = createApp({
        // 选项
        // data() {
        //   return {

        //   }
        // }
        setup(){
          const msg = ref('这是vue3');
          return {
            msg
          }
        }
      });
      box.mount('#app');
    </script>

Vue3生命周期

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
  <div id="app">
    <my-a v-if="flag"></my-a>
    {{ value }}
    <button @click="value='我被修改了'">点击修改value</button>
    <button @click="flag=!flag">点击解绑myA组件</button>
  </div>
  <script>
    const { createApp, ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } = Vue;
    // 创建组件
    let myA = {
      template:`
        <div>
          myA组件  
        </div>
      `,
      setup() {
        onBeforeMount(()=>{
          console.log('解绑前');
        }),
        onUnmounted(()=>{
          console.log('解绑完成');
        })
      }
    };
    let app = createApp({
      setup() {
        const value = ref('hello Vue3');
        const flag = ref(true);
        onBeforeMount(()=>{
          console.log('onBeforeMount');
        });
        onMounted(()=>{
          console.log('onMounted');
        });
        onBeforeUpdate(()=>{
          console.log('onBeforeUpdate');
        });
        onUpdated(()=>{
          console.log('onUpdated');
        })
        return {
          value,
          flag
        }
      }
    });
    app.component('my-a',myA)
    app.mount('#app')
  </script>
</body>
</html>

响应式基础

为什么要使用 ref?

当你在模板中使用了一个 ref,然后改变了这个 ref 的值时,Vue 会自动检测到这个变化,并且相应地更新 DOM。这是通过一个基于依赖追踪的响应式系统实现的。当一个组件首次渲染时,Vue 会追踪在渲染过程中使用的每一个 ref。然后,当一个 ref 被修改时,它会触发追踪它的组件的一次重新渲染。

声明响应式状态
ref()和reactive()

二者的区别

ref可以接受任意类型的数据

const count = ref(0);
const arr = ref([1,2,3,4]);

reactive只能接受引用数据类型 string number boolean 无法接受

const obj = reactive({
    name:'jamie',
    age:20
});

reactive可以填写基本数据类型,但是是非响应式的

toRef()和toRefs()

toRef 基于响应式对象的一个属性 来创建一个ref 并且会被追踪为响应式依赖

const age = toRef(obj,'age')

toRefs 基于响应式对象得到全部属性 创建多个ref 并且会被追踪为响应式依赖

const state = reactive({
    id: 1,
    gender: 'female',
    hobbies: ['游泳','篮球','足球']
})
const { id, gender, hobbies } = toRefs(state);
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

学前端的狗头苏丹

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值