用 vite 管理项目
vite 是什么? 作者推出的用以替代webpack的打包工具, 号称速度最快. 没啥可说的, 学吧...
好在它的透明性极高, 基本不用怎么管它. 用这个命令创建项目, vite 就自动包括在package.json 里了:
npm init vite-app sample1
cd sample1
npm install
npm run dev
然后访问 http://localhost:3000/ 就可以看到了.
第一个vue3程序
语法都改了
在Vue3.0中提出了Composition API的概念，Vue2.0中我们通过props、data、methods等来定义组件，在Vue3.0中我们使用setup定义响应式的数据和方法. 总而言之, 曾经短期用过 React的我觉得, 一切都向React 靠拢....
修改App.vue 如下:
<template>
<h1>ref 的例子</h1>
<img alt="Vue logo" src="./assets/logo.png">
<div>{{user}}的年龄: {{age}}</div>
<div>财富收入: {{double}}</div>
<button @click="add">+</button>
</template>
<script>
import {computed, ref} from 'vue'
export default {
name: 'App',
components: {
},
setup() {
// ---- 原来位于 data { } 里的定义
const user = ref('小肥爬爬') // 初始化的值
const age = ref(40) // 初始化的值
// ---- 原来位于 computed 里的定义
const double = computed(() =>{
return age.value * 2
})
function add() {
// 看看 ref 是什么 ?
console.log('--- ref: ', ref);
age.value += 1
}
return {user,age,add,double}
}
}
</script>
以前的data 被ref 代替
对照上面的代码和解释, 可以看出以前在data / methods 里这么写:
data: {
user: '小肥爬爬',
age: 40,
},
methods: {
add(){
// 代码实现
}
}
以后这么写:
const user = ref('小肥爬爬') // 初始化的值
const age = ref(40) // 初始化的值
// 方法
add(){
// 代码实现
}
// 记得要return
return {
user, age, add
}
computed 的写法
以前的computed写法也换了. 新的computed 这样写:
const double = computed(() =>{
return age.value * 2
})
然后同样在 setup 里导出.
我个人是相当喜欢这两个改变. 减少了很多代码量.
reactive
reactive 是vue3的一个新api, 它的作用是将普通对象变成响应式对象. 这个例子将之前的程序改用reactive 来写:
<template>
<h1>ref 的例子</h1>
<img alt="Vue logo" src="./assets/logo.png">
<div>{{user}}的年龄: {{age}}</div>
<div>财富收入: {{double}}</div>
<button @click="add">+</button>
</template>
<script>
import {computed, reactive, toRefs} from 'vue'
export default {
name: 'App',
components: {
},
setup() {
const UserInfo = reactive({
user:'小肥爬爬',
age:40,
double : computed(() =>{
return UserInfo.age * 2
})
})
function add() {
UserInfo.age += 1
}
return {...toRefs(UserInfo), add}
}
}
</script>
在这个例子里, reactive 将以前data / computed 的属性都封装成一个对象(该对象称为响应式对象) , toRefs 方法将之转变为实际的 ref , 给该vue使用.
注意!!
这里有个小陷阱, 你会看到用 ref定义属性的时候, 对该属性的操作是 xxx.value , 如下:
const age = ref(40) // 初始化的值
function add() {
age.value += 1
}
而如果是用 reactive 里组装响应式对象, 那么该对象的属性不用加value:
function add() {
UserInfo.age += 1 // 注意这里不是 UserInfo.age.value
}
于是我想, 如果 reactive 里是list/map 对象, 又该如何访问呢? 于是又改了个例子如下:
<template>
<h1>reactive包装对象</h1>
<img alt="Vue logo" src="./assets/logo.png">
<div>{{user}}的第二篇博客是: {{getSecond}}</div>
</template>
<script>
import {computed, reactive, toRefs} from 'vue'
export default {
name: 'App',
components: {
},
setup() {
const UserInfo = reactive({
user:'小肥爬爬',
age:40,
blogs: [
{'title': 'python3有用代码'},
{'title': 'spring cloud 入门教程'},
],
getSecond : computed(() =>{
return UserInfo.blogs[1].title;
})
})
return {...toRefs(UserInfo)}
}
}
</script>
实践证明, 对于这样的结构:
// 假设一个reactive 对象如下:
const UserInfo = reactive({
user:'小肥爬爬',
age:40,
blogs: [
{'title': 'python3有用代码'},
{'title': 'spring cloud 入门教程'},
]
})
还是正常的访问方式:
getSecond : computed(() =>{
return UserInfo.blogs[1].title;
})
总结
好了, 第一篇就先这样结束, 代码都在: https://gitee.com/xiaofeipapa/vue3-sample
由于一开始没有写vue3的组件开发, 所以代码组织比较麻烦. 本文的3个大例子都在 src/sample/ 目录下, 需要运行的时候请将之复制到 App.vue 运行.
参考/感谢
https://zhuanlan.zhihu.com/p/264211579
https://blog.csdn.net/cuipp0509/article/details/108199513
