vue3 一些关键属性

环境搭建

• 尤大开发了一个项目构建工具vite

 npm init vite-app <project-name>
 cd <project-name>
 npm install
 npm run dev

创建实例

• 之前是new Vue({})的形式来创建实例，vue3添加了一个新的方法--->creatApp

import {createApp} from 'vue'
const app =createApp({})

////////////////////////
import {
    createApp
} from 'vue'
import App from './App.vue'
const app = createApp(App)
app.mount('#app')

<template>
	<!-- 可以有多个节点 -->
	<h1>hello world</h1>
	<h1>x:{{ position.x }} y:{{ position.y }}</h1>
</template>

<script>
import { reactive } from 'vue';
// import HelloWorld from './components/HelloWorld.vue';

export default {
	name: 'App',
	// components: {
	// 	HelloWorld
	// },
	setup() { //数据入口
		let position = reactive({}); //构建响应式对象
		window.addEventListener('mousemove', e => {
			position.x = e.pageX;
			position.y = e.pageY;
		 	// console.log(position);
		});
		return { position }; //最后要暴露出这个数据
	}
};
</script>

选项式api 与 组合式api

• 解决逻辑关注点分散的问题

vue2：选项式api，

vue3 ：组合式api,写在setup()中，setup中没有this

export default {
	name: 'App',
	// components: {
	// 	HelloWorld
	// },
	setup() { //数据入口
        console.log('setup中的this为',this) //输出： setup中的this为 undefined
		let position = reactive({}); //构建响应式对象
		window.addEventListener('mousemove', e => {
			position.x = e.pageX;
			position.y = e.pageY;
		 	// console.log(position);
		});
		return { position }; //最后要暴露出这个数据
	}
};

ref

创建一个响应式变量

const time = ref(0); //创建值类型的变量 number  string

reactive

• vue2中存在一个Vue.observable方法，用来返回一个可响应的对象，在vue2中，data函数返回一个对象，vue内部会用Vue.observable 来处理

const position = reactive({
    //创建响应对象
    x: 0,
    y: 0,
    info: computed(() => {
    return `当前位置在 X: ${position.x} Y:${position.y}`;
    })
});

toRef

可以用来为源响应式对象上的 property 性创建一个 ref。然后可以将 ref 传递出去，从而保持对其源 property 的响应式连接。

const state = reactive({
  foo: 1,
  bar: 2
})
//三种方式创建变量
const fooToRef = toRef(state, "foo"); // fooToRef++  可以响应，state.foo同台改变
const fooRef = ref(state.foo); //无现象 stata不变
let foo = state.foo;//无现象 stata不变

通过上面的小测试可以看到，toRef是将变量与响应式对象建立引用关系，变量改变时可以改变源响应对象

toRefs

参考地址

• 作用：让props中的值变成响应式的

传入的props是响应式的，会实时更新，传递给setup就能直接使用

export default {
  props: {
    title: String
  },
  setup(props) {
    console.log(props.title)
  }
}

每次调用props中的属性都需要用 props.[属性名]的形式，书写复杂，考虑到es6的解构赋值

但是使用es6解构会消除prop的响应性，所以使用toRefs来简化写法

props:{
user:{
    type:String
    }
}
import{toRefs} 'vue' 

const { user } = toRefs(props)

watch

参考

watchEffect

占坑

生命周期

选项式 API	Hook inside setup
beforeCreate	Not needed*
created	Not needed*
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeUnmount	onBeforeUnmount
unmounted	onUnmounted
errorCaptured	onErrorCaptured
renderTracked	onRenderTracked
renderTriggered	onRenderTriggered