网站建设 之 vue defineComponent

1. 需要大量的逻辑组合的场景，可以使用compition API进行增强

例如mybook的。。。不管怎么说， 都是组合式api更强一点吧？例如文本域的设置，目录，本体的拆分，这个是极佳的。另外会更简约，只是不易懂罢了。没有其他的缺点了。

Vue2 传统的 data，computed，watch，methods 写法，我们称之为「选项式api（Options API ）」
Vue3 使用 Composition API （VCA）可以根据逻辑功能来组织代码，一个功能相关的 api 会放在一起。

在 Vue 中，有了抽象封装组件的概念，解决了在页面上模块越多，越显臃肿的问题。但即使进行组件封装，在应用越来越大的时候，会发现页面的逻辑功能点越来越多， data/computed/watch/methods 中会被不断塞入逻辑功能，所以要将逻辑再进行抽离组合、复用，这就是 VCA。

ref 和 reactive 的存在都是了追踪值变化（响应式），ref 有个「包装」的概念，它用来包装原始值类型，如 string 和 number ，我们都知道不是引用类型是无法追踪后续的变化的。ref 返回的是一个包含 .value 属性的对象。

在 template 中 ref 包装对象会被自动展开（Ref Unwrapping），也就是我们在模板里不用再 .value

reactive

与 Vue2 中的 Vue.observable() 是一个概念。
用来返回一个响应式对象，如:

const obj = reactive({
  count: 0
})
// 改变
obj.count++

defineComponent函数，只是对setup函数进行封装，返回options的对象；defineComponent最重要的是：在TypeScript下，给予了组件 正确的参数类型推断 。

在vue3中没有this对象, 所有的逻辑代码都写在setup方法里面.
若是要在HTML模板页面中使用变量或者方法, 需要在setup方法return出去.

setup是Vue3 的一大特性函数, 它有几个特性:

1、setup函数是处于 生命周期函数 beforeCreate 和 Created 两个钩子函数之间的函数

2、setup函数是 Composition API（组合API）的入口

3、在setup函数中定义的变量和方法最后都是需要 return 出去的 不然无法再模板中使用

setup函数的注意点：

vue3虽然支持vue2.x版本的写法,但也有一些要注意的地方

1、由于在执行 setup函数的时候，还没有执行 Created 生命周期方法，所以在 setup 函数中，无法使用 data 和 methods 的变量和方法

2、由于我们不能在 setup函数中使用 data 和 methods，所以 Vue 为了避免我们错误的使用，直接将 setup函数中的this修改成了 undefined

3、setup函数只能是同步的不能是异步的

上面的组件中用defineComponent包裹了组件;
defineComponent函数，只是对setup函数进行封装，返回options的对象；
defineComponent最重要的是：在TypeScript下，给予了组件 正确的参数类型推断 。

defineComponent函数，只是对setup函数进行封装，返回options的对象；

export function defineComponent(options: unknown) {
  return isFunction(options) ? { setup: options } : options
}

如果options是一个函数，就返回一个类，否则返回这个类，就是对setup的包装，因此直接返回一个setup函数就可以。defineComponent最重要的是：在TypeScript下，给予了组件 正确的参数类型推断 。为什么这么说呢，vue3 如果用ts，导出时候要用 defineComponent，这俩是配对的，为了类型的审查正确

害，反正怎么说呢，在main里是组合模式为了方便，在readfragment里是ts模式因为很正规，在readpage里是组合模式因为组合性很强，在help里用组合模式同样为了方便

代码很少的用组合模式，简约，代码适中的用ts模式，有语意，代码很多的用组合模式，简约有语意