vue3新特性之Composition api

本文使用的vue版本为 3.0.5

vue2中Options API 和 vue3中Composition API 的对比

vue2中Options API 和 vue3中Composition API 的对比

---

快速开始

通过Vite来搭建脚手架

$ npm init @vitejs/app hello-vue3

或者

yarn create @vitejs/app hello-vue3

创建好项目后，进入项目文件夹执行npm install，等待包都依赖完后，执行npm run dev

---

setup

一个组件选项，在组件被创建之前执行，一旦props被解析，它就作为Composition API的入口点

export default {
  props: {
    msg: {
      type: String,
      default: () => {}
    }
  },
  /*
   *接收两个参数
   *props: 使用组件时，传递过来的props数据
   *context: 组件的上下文对象
  */
  setup(props,context) {
    console.log(props,context);
  }
}

该函数在beforecreate之后，create之前执行，内部不能使用this;

---

使用reactive生成响应式数据

<template>
	<div>
		<p>count:{{data.count}}</p>
	</div>
</template>
<script>
import { reactive } from 'vue'

  export default {
    setup() {
        let data = reactive({
			count:10
		});
		function increment() {
		  data.count++
	    }
		setInterval(()=>{
			increment();
		},1000);
        return {
	        data
        }
    }
  }
</script>

使用reactive处理后的数据,能变成响应式数据，相当于vue2 option api里面的data

reactive里的数据只能object对象，如果传入number、Boolean等类型会提示value cannot be made reactive

---

使用computed计算属性

<template>
	<div>
		<p>count:{{data.count}}</p>
	    <p>doubleCounter:{{data.doubleCounter}}</p>
	</div>
</template>
<script>
import { reactive,computed } from 'vue'

  export default {
    setup() {
        let data = reactive({
			count:10,
			doubleCounter: computed(() => data.count*2)
		});
		function increment() {
		  data.count++
	    }
		setInterval(()=>{
			increment();
		},1000);
        return {
	        data
        }
    }
  }
</script>

---

使用watch监听数据变化

<template>
	<div>
		<p>count:{{data.count}}</p>
	</div>
</template>
<script>
import { reactive,watch } from 'vue'

  export default {
    setup() {
        let data = reactive({
			count:10
		});
		function increment() {
		  data.count++
	    }
	    watch(count,(nval,oval)=>{
			console.log(nval,oval);
		});
		setInterval(()=>{
			increment();
		},1000);
        return {
	        data
        }
    }
  }
</script>

---

使用ref生成响应式数据以及获取dom元素

<template>
	<div>
		<p>count:{{count}}</p>
		<p ref="msg"></p>
	</div>
</template>
<script>
import { ref } from 'vue'

export default {
    setup() {
        let count = ref(0);
        let msg = ref(null)
		function increment() {
		  count.value++;
		  let p = msg.value;
		  p.textContent = `最新的count:${count.value}`;
	    }
		setInterval(()=>{
			increment();
		},1000);
        return {
	        count,
	        msg
        }
    }
}
</script>

使用ref处理后的数据,能变成响应式数据，但操作时需要加.value

ref也可以用来获取dom元素,传入null，使用与ref属性相同的名称，即可

---

生命周期函数使用

可以按需导入到组件中，且只能在setup()函数中使用

生命周期2.x与Composition之间的映射关系

• beforeCreate -> use setup()
• created -> use setup()
• beforeMount -> onBeforeMount
• mounted -> onMounted
• beforeUpdate -> onBeforeUpdate
• updated -> onUpdated
• beforeDestroy -> onBeforeUnmount
• destroyed -> onUnmounted
• errorCaptured -> onErrorCaptured

<template>
	<div>
		<p>count:{{count}}</p>
	</div>
</template>
<script>
import { ref, onMounted } from 'vue'

export default {
    setup() {
        let count = ref(0);
		function increment() {
		  count.value++;
	    }
		setInterval(()=>{
			increment();
		},1000);
		
		onMounted(()=>{
			console.log('onMounted');
		});
        return {
	        count
        }
    }
}
</script>

---

总结

以上就是vue3 Composition api 的快速上手内容，后续将更新更多的vue3文章