1. 使用vite直接创建
npm init vite 回车
Need to install the following packages:
create-vite
Ok to proceed? (y) y
✔ Project name: … vue3_vite //项目名称
✔ Select a framework: › vue //选择vue
✔ Select a variant: › vue
cd vue3_vite //进入目录
npm install //安装依赖
npm run dev //运行项目
效果:
2. 使用vue3官方推荐创建方式
npm init vue@3
步骤:
Need to install the following packages:
create-vue@3
Ok to proceed? (y) y
Vue.js - The Progressive JavaScript Framework
✔ Project name: … vue3_ok //项目名称
✔ Add TypeScript? … No / Yes //是否使用TS
✔ Add JSX Support? … No / Yes //是否支持JSX,除非你是搞React开发
✔ Add Vue Router for Single Page Application development? … No / Yes //是否添加路由
✔ Add Pinia for state management? … No / Yes //是否添加状态管理 推荐pinia
✔ Add Vitest for Unit Testing? … No / Yes //是否添加单元测试
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes //是否添加端到端测试
✔ Add ESLint for code quality? … No / Yes //是否添加ESLint做代码质量检查
✔ Add Prettier for code formatting? … No / Yes //是否添加Perttier进行代码格式化
cd vue3_ok //cd 进行目录
npm install //安装相关依赖 npm i
npm run lint //运行代码修复
npm run dev //运行项目
效果:
3. vue3核心语法
组合式api
-
ref
-
通常定义基本类型或数组类型的变量或常量
-
例如:
import {ref} from 'vue' let num = ref(10); let str = ref('hello world') let arr = ref([{ id: 1, name: 'jack' }, { id: 2, name: 'alice' }])
-
如何操作dom[通常vue很少操作dom]
-
给dom定义ref名称
<button ref="btn" @click="changeValue">修改值</button><
-
定义一个ref常量
//定义dom操作对象 const btn = ref(null)
-
然后通过常量.value.style.css属性名
btn.value.style.width='300px'
-
-
-
reactive
-
reactive主要用于复杂对象类型
-
例如:
//定义用户信息 const obj = reactive({ username: '张三', age: 20, address: '北京', hobby: ['音乐', '刷抖音'], })
-
-
toRef
-
可以将reactive定义的响应式对象中的某个属性单独提取成ref定义的形式
-
例如:
const obj = reactive({ username: '张三', age: 20, address: '北京', hobby: ['音乐', '刷抖音'], }) const mingzi=toRef(obj,'username') 模板: {{ mingzi }}
-
-
toRefs
-
可以将reactive定义的对象属性全部提取出来转换成ref形式
-
例如:
//定义用户信息,reactive主要用于复杂对象类型 const obj = reactive({ username: '张三', age: 20, address: '北京', hobby: ['音乐', '刷抖音'], }) //toRefs const {username,age,address,hobby}=toRefs(obj)
-
computed
-
可以将ref,reative定义的变量或常量,通过计算属性生成一个新的可响应式的值(ref)
-
例如:
//计算属性 const total = computed(() => { let res = 0; arr.value.forEach(item => { res+=item.num }) return res })
-
-
-
通常computed只能读取(默认支持get),不能修改,如果想修改,必须通过set方式
- 例如:
const fullname = computed({ get: () => { return firstname.value + lastname.value; }, set: (val) => { firstname.value = val[0]; lastname.value = val.slice(1); }, });
-
watch
-
数据改变时,才监听数据的变化
-
例如:
//监听ref //watch(监听目标,回调) watch(firstname, (newV, oldV) => { console.log('新值:',newV) console.log('旧值:', oldV) }) //监听reactive watch(()=>obj.username, (newV,oldV) => { console.log('obj.username新值:',newV) console.log('obj.username旧值:', oldV) })
-
-
watchEffect
-
进行页面立即触发监听
-
例如:
watchEffect(() => { console.log('进入立马监听:',firstname.value) })
-
-
nextTick
- 由于数据改变,dom并未更新,如果要拿到dom更新之后的结果,需要通过nextTick来解决
- 应用场景:
- 商品列表滚动
- 数据更新,要对dom做一些操作时使用