用 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