vue3+ ts +vite pinia相关总结

基础

在vue3中一般返回的数据是不响应的,如果需要响应式需要在定义时声明(ref/reactive );

这点和vue2的不同,在 Vue2 中,我们只需要把数据放入 data 函数即具备响应式,Vue2 会遍历 data 中的所有属性,使用 Object.defineProperty拦截把每个 property 全部转为 getter/setter,getter 用来收集依赖,setter 用来执行 notify,发布更新事件.

Vue3基于proxy拦截实现响应式的能力,解决了vue2所遗留下来的一些问题(对象新增,数组下标修改不响应),是真正的响应式.但还是存在一些弊端(也不能叫弊端,操作和vue2习惯不一样而已).

1、 原始值的响应式实现 必须将他包装为一个对象Ref,通过.value 的方式访问.或包装为reactive

2、 直接赋值和ES6解构都会失去响应式.

需要通过修改对象的属性的形式,实现修改数据. reactiveVal.arr=[1,2,3]   refVal.value.arr=[1,2,3]

解构使用toRefs()代替ES6解构.

Vite(webpack和vite 都是现代化打包工具)

对非常基础的使用来说,使用 Vite 开发和使用一个静态文件服务器并没有太大区别。然而,Vite 还通过原生 ESM 导入提供了许多主要用于打包场景的增强功能.

在一个 Vite 项目中,index.html 在项目最外层而不是在 public 文件夹内。这是有意而为之的:在开发期间 Vite 是一个服务器,而 index.html 是该 Vite 项目的入口文件.

vite 以当前工作目录作为根目录启动开发服务器。你也可以通过 vite serve some/sub/dir 来指定一个替代的根目录。

Vue3+ts:

为了让 TypeScript 正确地推导出组件选项内的类型,我们需要通过 defineComponent() 这个全局 API 来定义组件.

import { defineComponent } from 'vue'

export default defineComponent({

  props: {

    name: String,

    msg: { type: String, required: true }

  },

  data() {

    return {

      count: 1

    }

  },

  mounted() {

    this.name // 类型:string | undefined

    this.msg // 类型:string

    this.count // 类型:number

  }

})

在使用了

你可能感兴趣的:(typescript,前端,vue)