初识Vue3

最新推荐文章于 2024-05-31 10:58:20 发布

学前端的狗头苏丹

最新推荐文章于 2024-05-31 10:58:20 发布

阅读量324

点赞数

分类专栏： Vue3 文章标签： vue.js 前端 vue3 前端框架

本文链接：https://blog.csdn.net/qq_53866767/article/details/132814329

版权

Vue3 专栏收录该内容

1 篇文章 1 订阅

订阅专栏

创建实例

通过对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
评论
初识Vue3

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

扫一扫