文章目录

• • 一、构建项目
  • • 1、创建项目
    • 2、安装依赖
    • 3、运行
    • 4、安装插件
    • 5、配置用户代码块
    • 6、安装UI组件库ElementPlus
  • 二、vue3基础使用学习
  • • 1、模板语法&vue指令
    • 2、Vue核心虚拟Dom和 diff 算法（了解）
    • 3、ref和reactive
    • 4、toRef、toRefs、toRaw
    • 5、computed计算属性
    • 6、watch监听
    • 7、watchEffect高级监听
    • 8、生命周期

一、构建项目

1、创建项目

npm init vite@latest

或使用npm init vue@latest，这种方式配置多一点，包括router，pinia等，专门为构建vue用的，齐全一点，vite（vite? 、vite和webpack区别？🔎）可以构建其他项目，比如react或其他，下面是用第一种方式npm init vite@latest：

在vsCode打开项目，vite构建的vue项目目录如下：

2、安装依赖

进入vite-demo目录，安装依赖（根据项目中的package.json文件安装依赖）

npm install

3、运行

• 设置默认启动项目自动开启浏览器:server: { open: true }

• 运行项目

npm run dev

页面显示如下，项目运行成功 ！

4、安装插件

安装 Vue Language Features (Volar)， TypeScript Vue Plugin (Volar） 插件后就可以写vue3代码了~

注意：若之前开发vue2有安装vetur插件（对.vue文件中的语法进行高亮显示），开发vue3需要禁用这个插件

5、配置用户代码块

• 配置

设置—配置用户代码片段—选择vue（vue）或者vue.json（vue）


把下面代码复制到vue.json里面

{"Print to console": {"prefix": "vue3","body": ["","","",""],"description": "Log output to console"}
}

• 使用示例
  新建一个.vue文件，输入vue3，回车，
  
  即可一键生成模板
  

6、安装UI组件库ElementPlus

1）官方说明文档：

• 官方教程

• 快速开始

2）安装element-plus

• 在项目路径下执行命令安装：

npm install element-plus --save

• 安装成功后，全局配置（main.ts）：

// main.ts
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import ElementPlus from 'element-plus' // 引入ElementPlus 组件
import 'element-plus/dist/index.css' // 引入ElementPlus 组件样式// createApp(App).mount('#app')
const app = createApp(App)
app.use(ElementPlus) // 使用ElementPlus组件
app.mount('#app')

此外还有其他导入方式（自动导入/按需导入、手动导入），请参考官方使用教程

• 使用示例（按钮组件）

3）安装icon图标

• 安装

npm install @element-plus/icons-vue

• 注册所有图标（main.ts）

// main.ts
// 如果您正在使用CDN引入，请删除下面一行。
import * as ElementPlusIconsVue from '@element-plus/icons-vue'const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)
}

• 使用示例

二、vue3基础使用学习

1、模板语法&vue指令

v- 开头都是vue 的指令

v-text 用来显示文本

v-html 用来展示富文本

v-if 用来控制元素的显示隐藏（切换真假DOM）

v-else-if 表示 v-if 的“else if 块”。可以链式调用

v-else v-if条件收尾语句

v-show 用来控制元素的显示隐藏（display none block Css切换）

v-on 简写@ 用来给元素添加事件

v-bind 简写: 用来绑定元素的属性Attr

v-model 双向绑定

v-for 用来遍历元素

v-on修饰符

参考案例

2、Vue核心虚拟Dom和 diff 算法（了解）

Vue3 源码地址

3、ref和reactive

1） vue2和vue3的双向绑定值定义区别

• vue2:

• vue3：使用ref或者reactive包裹，或者自定义customRef

2）ref

• ref接受一个内部值并返回一个响应式且可变的 ref 对象。ref 对象仅有一个 .value property，指向该内部值。
• 使用案例

3）reactive

• ref用来绑定复杂的数据类型 例如对象、数组， 绑定普通数据类型会报错。
  

• 使用案例

4）shallowRef、shallowReactive
只能对浅层的数据，如果是深层的数据只会改变值（打印的是改变的值），不会改变视图（页面不会刷新）

4、toRef、toRefs、toRaw

• toRef、toRefs

注意： 只能解构响应式对象的值

• toRaw

把响应式的对象转为普通对象

5、computed计算属性

计算属性就是当依赖的属性的值发生变化的时候，才会触发他的更改，如果依赖的值，不发生变化的时候，使用的是缓存中的属性值。

案例：

6、watch监听

watch 需要侦听特定的数据源，并在单独的回调函数中执行副作用

watch第一个参数监听源

watch第二个参数回调函数cb（newVal,oldVal）

watch第三个参数一个options配置项是一个对象{

immediate:true //是否立即调用一次

deep:true //是否开启深度监听

• 监听普通类型

依次修改三个值，监听打印如下：

• 监听深层对象

• 监听reactive 单一值

import { ref, watch ,reactive} from 'vue'
let message = reactive({val1:"",val2:""
})
watch(()=>message.name, (newValue, oldValue) => {console.log('新值----', newValue);console.log('旧值----', oldValue);
})

7、watchEffect高级监听

watchEffect相当于将watch 的依赖源和回调函数合并，当任何你有用到的响应式依赖更新时，该回调函数便会重新执行。不同于
watch，watchEffect 的回调函数会被立即执行（即 { immediate: true }）

• 非惰性（立即执行）

• 不需要传递你要侦听的内容，自动会感知代码依赖（就是watchEffect内用到了哪个响应式变量，就监听哪个变量）

• watchEffect的副作用

副作用就是执行某种操作，如对外部可变数据或变量的修改，外部接口的调用等。watchEffect的回调函数就是一个副作用函数，因为我们使用watchEffect就是侦听到依赖的变化后执行某些操作。

• 清除副作用应用

在触发监听之前会调用一个函数可以处理你的逻辑，例如：

1）节流防抖

// 节流防抖

2）定时器注册和销毁

3）dom的监听和取消监听

• 停止监听

• 副作用刷新时机 flush (一般使用post)

8、生命周期

参考笔记