【vue3.0】13.0 Composition API(一)——setup、ref、reactive、toRefs

vue3的特点

更多的API特性
体积更小、速度更快
解决遗留问题（比如对TS不友好、代码组件逻辑复用）

createApp表示创建一个Vue应用，传入的参数表示这个应用最外层的组件应该如何展示。

  // createApp 表示创建一个 Vue 应用, 存储到 app 变量中
  // 传入的参数表示，这个应用最外层的组件，应该如何展示
  // MVVM 设计模式，M -> Model 数据， V -> View 视图， VM -> ViewModel 视图数据连接层
  const app = Vue.createApp({
    data() {
      return {
        message: 'hello world'
      }
    },
    template: "{{message}}"
  });
  // vm 代表的就是 Vue 应用的根组件
  const vm = app.mount('#root');

VUE3.0 新特性 Composition API

当一个组件越来越大的时候，会出现如下的代码结构：

当一个组件变得越来越复杂的时候。会发现一个问题。当我们去看模板（template）中，name相关的逻辑的时候，会看到各个地方都涉及到这个变量的修改，维护性会很复杂。

这就有了Composition API。
Composition API涉及到需要了解一个重要的函数setup。




  
  
  lesson 34

进一步分析。

如上代码是执行报错的。有了setup就不需要用到this这样的语法了，method方法有更好的Composition API写法。
setup没法调用外部的方法、函数、钩子函数等，比如methods、mounted。setup内部也没有this可以使用。

ref, reactive 响应式的引用

如下代码：

修改代码：

发现及时name变了，模板也不会改变。
Composition API中有办法将普通的变量改成响应式的变量。

原理：通过 proxy 对数据进行封装，当数据变化时，触发模版等内容的更新

这时候需要ref，这是vue提供给我们的一个语法。

ref适合处理基础数据类型，像对象{}、数组[]，就不方便处理。
除此之外，可以有如下写法，通过reactive:

由以上可见，setup中通过ref, reactive彻底转换了data的作用。

readonly

如果一个参数我们定义为只读状态，vue提供readonly函数。

如上代码就会因为readonly报错。

toRefs

解构，如果只需要传递某一个对象中的一个属性，那么可以如下编写代码：

同样可以实现动态更新值。
toRefs的原理：

toRefs proxy({ name: 'dell', age: 28}), {
name: proxy({ value: 'dell'}),
age: proxy({value: 28})
}

toRef

context参数

这个相当于把

123123

渲染到页面上。
如果想把插槽内容parent渲染到页面上：

emit的使用：




  
  
  lesson 36