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