vue3从0到1

一、搭建工程

1.  环境准备

        node.js版本大于18.3.0

      2. 创建vue3项目

二、自己写一个app组件

 我们删除所有src文件内容，自己写vue3项目：

main.ts

App.vue

运行npm run dev结果：

三、自己写一个components

在src下创建一个components目录，在目录下新建Person.vue文件

Person.vue

四、vue3，组合式API（vue2是选项是API）写法

更改Person.vue

五、安装setup插件

1.安装插件

2.引入插件

六、基本类型的响应式数据ref()

七、对象类型的响应式数据reactive()

修改前：

修改后：

如何使用reactive修改整个对象：

八、设置ref.value的自动补全

九、ref、reactive使用原则：

十、toRefs()

十一、computer()

tips：计算属性computer()有缓存，方法function没有缓存，涉及需要计算得出结果的使用computer()

.slice()与.substring的区别

• .slice() 允许负索引，而 .substring() 不允许。
• .substring() 自动处理 start 和 end 参数的大小关系，而 .slice() 不会。
• 当使用负索引或需要处理索引超出字符串长度的情况时，应使用 .slice()。
• 当需要确保参数顺序不影响结果时，可以使用 .substring()。

理解这些区别可以帮助你在合适的场景下选择正确的方法。

十二、watch()

情况一：

情况二：

情况三：

情况四：

情况五：

十三、watchEffect()

十四、ref标签