vue2转战vue3的简单步骤第一部分

学习vue3

1. 创建vue3项目

1. 熟悉命令行
2. 已安装 18.0 或更高版本的 Node.js
3. npm create vue@latest

https://cn.vuejs.org/guide/quick-start.html

2. 组合式API

2.1 setup

2.2 响应式对象

2.2.1 reactive(只能是对象)

// 响应式对像
const state = reactive({
    count: 0
})
const addCount = () => {
    state.count++
    console.log(state.count)
}

<div>{{ state.count }}</div>
<div @click="addCount" style="padding: 5px 10px;">addCount++</div>

2.2.2 ref(支持任意类型)

// ref 响应式对象
import {ref} from "vue";
// 1 对像形式
const num = ref({
    count: 0
})
const addCount = () => {
    num.value.count++
    console.log(num.value.count)
}
// 2 简单类型 数字、字符、布尔
const num2 = ref(0)
const addCount2 = () => {
    num2.value++
    console.log(num2.value)
}
// 3 数组
const num3 = ref([0, 1, 2])
setInterval(function () {
    num3.value.push(num3.value.length + 1)
}, 2000)

<template>
    <div>
        <div @click="addCount" class="btn">{{ num.count }}</div>
        <div @click="addCount2" class="btn">{{ num2 }}</div>
        <div>{{ num3 }}</div>
    </div>
</template>

2.3 属性

2.3.1 computed

<div>总价：<input v-model="goods.totalPrice"></div>
<div>数量：<input v-model="goods.amount"></div>
<div>折扣：<input v-model="goods.discount"></div>
<div>折扣平均单价<input v-model="avgPrice"></div>

回忆vue2

export default {
    name: "App",
    data() {
        return {
            totalPrice: 2000,
            amount: 10,
            discount: 8,
        }
    },
    computed: {
        avgPrice() {
            return (this.totalPrice / this.amount * (100 - this.discount)) / 100
        }
    }
}

vue3写法

//
const goods = ref({
    totalPrice: 2000,
    amount: 10,
    discount: 8,
})
// const avgPrice = computed(() => {
//   return (goods.value.totalPrice / goods.value.amount * (100 - goods.value.discount)) / 100
// })

// 获取和设置
const avgPrice = computed({
    get() {
        console.log('get')
        return (goods.value.totalPrice / goods.value.amount * (100 - goods.value.discount)) / 100
    },
    set(value) {
        console.log('set')
    }
})

2.3.2 watch之普通侦听

<div>
    我是{{ name }}，今天我很{{ happy ? '开心' : '不开心' }}
    <div @click="changeHappy">改变心情</div>
</div>

回忆vue2写法

export default {
    name: "App",
    data() {
        return {
            name: 'jerry',
            happy: true,
        }
    },
    watch: {
        happy(newValue, oldValue) {
            console.log('watch--1haapy被修改了', newValue, oldValue)
        }
        // happy: {
        //     immediate: true,// 初始化时让handler调用一下
        //     deep: true,// 深度监听
        //     handler(newValue, oldValue) {
        //         console.log('watch--2haapy被修改了', newValue, oldValue)
        //     }
        // }
    },
    methods: {
        changeHappy() {
            this.happy = !this.happy
        }
    }
}

vue3的写法

import {ref, watch} from 'vue'

const name = ref('jerry')
const happy = ref(true)
const changeHappy = () => {
    happy.value = !happy.value
    name.value = happy.value ? 'tom' : 'jerry'
}
// 常规写法1
watch(happy, (newValue, oldValue) => {
    console.log('watch--1haapy被修改了', newValue, oldValue)
})
// 常规写法2用的比较多
watch(happy, (newValue) => {
    console.log('watch--2haapy被修改了', newValue)
})
// 同时兼听多个
watch([name, happy], (nameArray, happyArray) => {
    // 注意nameArray, happyArray都为数组
    // Array [ "jerry", false ] Array [ "tom", true ]
    console.log('watch--name被修改了', nameArray, happyArray)
})
watch([name, happy], ([newValue, oldValue], [newValue2, oldValue2]) => {
    console.log('watch--name被修改了', newValue, oldValue, 'happy被修改了', newValue2, oldValue2)
})

2.3.3 watch之对象、深度、精准侦听

<div>
    我是{{ name }}，今天我很{{ happy ? '开心' : '不开心' }} 测试{{ nums }}
    <div @click="changeHappy">改变心情</div>
</div>

回忆vue2

export default {
    name: "App",
    data() {
        return {
            name: 'jerry',
            happy: true,
            nums: {
                test1: 'x',
                test2: 'y'
            }
        }
    },
    watch: {
        // happy(newValue, oldValue) {
        //   console.log('watch--1haapy被修改了', newValue, oldValue)
        // }
        // 深度侦听
        nums: {
            immediate: true,// 初始化时让handler调用一下
            deep: true,// 深度监听
            handler(newValue, oldValue) {
                console.log('watch--深度侦听-被修改了', newValue, oldValue)
            }
        },
        // 精确侦听
        'nums.test1': {
            handler(newValue, oldValue) {
                console.log('watch--深度侦听-被修改了', newValue, oldValue)
            }
        }
    },
    methods: {
        changeHappy() {
            this.happy = !this.happy
            this.nums.test1 = this.happy ? 'a' : 'b'
        }
    }
}

vue3写法

import {ref, watch} from 'vue'

const name = ref('jerry')
const happy = ref(true)
const nums = ref({
    test1: 'x',
    test2: 'y'
})
const changeHappy = () => {
    happy.value = !happy.value
    name.value = happy.value ? 'tom' : 'jerry'
    nums.value.test1 = happy.value ? 'a' : 'b'
}
// 深度侦听
watch(nums, (newValue) => {
    console.log('watch--深度侦听被修改了', newValue.test1)
}, {deep: true, immediate: true})
//精准侦听
watch(() => nums.value.test1, (newValue, oldValue) => {
    console.log('watch--精准侦听nums被修改了', newValue, oldValue)
})

下一步简介生命周期相关的东西