vue-next（vue3.0）学习笔记（1）

1.基于vite创建一个vue3.0项目

npm init vite-app 项目名称
cd 项目名称
npm install
npm run dev
npm run build

2.setup

setup函数是一个新的组件选项，作为在组件内使用Composition API的入口点

• 初始化props和beforeCreate之间的调用
• 可以接收props和context
• this在setup()中不可用

props是响应式的，可以基于watchEffect/watch监听，但是解构赋值后是无效的

import { watchEffect } from "vue";
export default {
	props: {
		title: {
			type: String,
			default: 'vue3.0'
		}
	},
	setup(props) {
		//这样写props是响应式的
		watchEffect(() => {
			console.log(props.title);
		});
	}
};

import { watchEffect } from "vue";
export default {
	props: {
		title: {
			type: String,
			default: 'vue3.0'
		}
	},
	setup({title}) {
		  //这样解构写就不是响应式了
		watchEffect(() => {
		  	console.log(title);
		});
	}
}

我们可以在setup中创建一个变量

export default {
	setup() {
		let num = 0;
		return {
			num
		}
	}
}

3.ref

接受一个参数值并返回一个响应式且可改变的 ref 对象

ref 对象拥有一个指向内部值的单一属性 .value

当ref在模板中使用的时候，它会自动解套，无需在模板内额外书写 .value

import { ref } from "vue";
export default {
	setup() {
		let num = ref(0);// 现在num就是响应式了
		return {
			ref
		}
	}
}

4.reactive

接收一个普通对象然后返回该普通对象的响应式代理 等同于 2.x 的 Vue.observable()

  响应式转换是“深层的”：会影响对象内部所有嵌套的属性

import { ref, reactive } from "vue";
export default {
	setup() {
		let state = reactive({
			num: 0
		})
		return {
			state
		}
	}
}

5.readonly

传入一个对象（响应式或普通）或 ref，返回一个原始对象的只读代理 一个只读的代理是“深层的”，对象内部任何嵌套的属性也都是只读的

import { reactive, readonly } from "vue";
export default {
    setup() {
        const num = reactive({
            count: 0,
        });
        const copy = readonly(num);
        copy.count++; // 无法修改会报警告
        console.log(copy.count);
    }
};

6.computed

传入一个 getter 函数，返回一个默认不可手动修改的 ref 对象

import { ref, computed } from "vue";
export default {
    setup() {
        const count = ref(1);
        const add = computed(() => {
            count.value + 1;
        });
        console.log(count.value);
        add.value++; //报错
    }
};

或者传入一个拥有 get 和 set 函数的对象，创建一个可手动修改的计算状态

const count = ref(1);
const add = computed({
    get: () => count.value + 1,
    set: (val) => {
        count.value = val - 2;
    },
});
add.value++;
console.log(count.value);