vue学习笔记1

1.optionsAPI（选项式）和compositionAPI（组合式）的比较

        vue2采用optionsAPI，但是它把函数分成data，method等部分，导致维护很困难，

vue3的compositionAPI解决了这个问题。

2.选项式成为组合式，是通过vue3的setup语法糖实现。

3.setup语法比最早的钩子函数beforeCreate（）执行时间还早。

4.箭头函数

        箭头函数的引入使得 JavaScript 的函数书写更加简洁，并且提供了更直观的 this 处理方式。对于简单的函数操作，箭头函数是一种非常实用的语法。

5.setup语法糖和vue2的写法的混合使用

        setup和data，method的写法是可以共存，但是setup的生命周期比后者先，所以可以在后者里读取setup的数据，反之不可。

6.响应式数据

        ref——定义基本类型、对象类型数据——被包裹的对象是refimpl对象

        reactive——只能定义对象类型的数据——被包裹的对象是proxy对象

        ps：ref定义对象时，修改数据需要.value，并且定义对象数据时底层也要调用reactive

7.torefs

        当你需要结构响应式对象时，比如

//data
let person = reactive(
    {
        name: 'xxx',
        age: 18,
        address: '爱情公寓',
        tel: '110'
    }
)

let { name, age } = toRefs(person)

你需要torefs方法来把解构出来的属性值转为响应式，并且修改该属性依然会修改原属性值

8.v-bind和v-model

        v-bind是单项绑定，数据只能流向页面

        v-model是双向绑定，数据可以互相流出

9.computed响应式

        它和方法比较，有缓存

        使用：

let fullName = computed(()=>{
    ...
})

        但是这样定义的computed的数据无法修改

let fullName = computed({
    get() {
        return Fname.value.slice(0, 1).toUpperCase() + Fname.value.slice(1) + '-' + Lname.value
    },
    set(val) {
        const [str1, str2] = val.split('-')
        Fname.value = str1
        Lname.value = str2
    }
})

function changeName() {
    fullName.value = '额-是恁爹'
}

        这样定义的computed加上set，get函数便可以修改