Vue3学习记录一：写法入门

组合API

• setup函数是组合API的入口函数。
• 在组合API中, 如果想定义方法, 不用定义到 methods 中, 直接定义即可。
• 在组合API中定义的变量/方法, 要想在外界使用, 必须通过return {xxx, xxx}暴露出去。

//该示例定义了一个名称叫做count变量, 这个变量的初始值是0；
//count发生改变之后, Vue会自动更新UI
import {ref} from 'vue';
export default {
        name: 'App',
        setup() { 
            let count = ref(0); // 相当于 let count = 0;
            function myFn() {
                count.value += 1; // count是一个对象
            }
            return { count, myFn }
        }
    }

1. 通过Proxy响应式数据

let obj = {name: 'zs',age: 18};
let state = new Proxy(obj, {
	get(obj, key) {
		console.log(obj, key); // { name: 'zs', age: 18 } name
		return obj[key];
	},
	set(obj, key, value) {
		console.log(obj, key, value); // { name: 'zs', age: 18 } name ls
		obj[key] = value;
		console.log('更新UI界面');
	}
});

// console.log(state.name); // lnj
state.name = 'ls';
console.log(state); // { name: 'ls', age: 18 }