vue3 use plugin reactive readonly ref简单用法

这是我参与「掘金日新计划 · 8 月更文挑战」的第6天，点击查看活动详情

其实vue2的插件写法和vue3差不多，就是在最后引用的时候会有区别

vue2的写法 就是一个vue模版 主要区别在引用是使用 a.vue

<template>
  <div class="confirmpopup">
     vue2的组件
  </div>
</template>

b.js

import promptComponent from './a.vue'
export default{
   install(Vue) { // 传进来的vue实例
         
   }

}

然后在main.js里用use方法就行可以了

vue3的写法差不多。模版一样 引用的方式有所却别

c.js install 里传过来两个参数 app 就是vue的实例，options是use方法的第两个参数

用法 app.use(k,{ a: '' })

export default{
   install(app,options) { //  app 是vue是实例 options 是上面use传过来的参数
         
   }

}

区分并不大， reactive vue3的使用其实和vue2的 observable()用法差不多 都是返回一个被代理后的响应式对象

vue2的observable()大家应该用到的都不多 这是Vue2的静态方法使用

  let d = Vue.observable({  name: 'dddd' }) // 对象代理
  console.log("observable",d)

打印出来的图片

vue3 用reactive返回一个对象 这个在vue3就比较常用了 毕竟vue3和vue2的写法上还是有区别的 vue3 是需要结构出来使用

import { ref, 
 reactive,
 } from 'vue'
 
 setup(props,ctx) {
  let d = reactive({ name: '3333' }) // 如果返回对象 一般都是这样用 所以在vue3中还是比较常用
 return {
     d
   }
  }

这是打印出来的图片

readonly 方法是返回只读的代理对象 看代码截图

这是打印出来的log

如果我们更改readonly方法返回的对象会有警告，并且数据并不会更改，嵌套对象一样生效

ref 方法 也是返回一个对象，我们我们主要用的是其value 属性

如果我们用ref({ name: "dadas" })传入一个对象,vue3会用ref内部会reactive方法，返回一个reactive对象 代码截图

看下打印出出来

日志截图可以看出来 虽然是ref对象 但是value是 reactive返回的对象