初识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 来创建一个新的应用实例：

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

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

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

    

      {{ msg }}
    
    

Vue3生命周期

  
  
  
  
  


  

    
    {{ value }}
    点击修改value
    点击解绑myA组件
  
  

响应式基础

为什么要使用 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);