您现在的位置是：首页 > Vue3组合式API使用教程

Vue3组合式API使用教程

默认 2022-06-01 11:05 共2324人围观 来源：原创
vue3  
简介通过使用 Vue组合式API ，我们可以将界面中重复的部分连同其功能一起提取为可重用的代码段。
 
<script lang="ts" setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup

在 Vue 3.0 中，我们可以通过一个新的 ref 函数使任何响应式变量在任何地方起作用，如下message所示
 
import { ref, reactive, watch, onMounted, computed} from 'vue';
 
// import后可以直接使用无需像vue2一样定义components
import UiHeader from '@/components/UiHeader.vue'
 
// 定义一个响应式的变量
let message = ref('hello world')
// 修改message的值
const changeMessage = (newval)=>{
message.value = newval;
}
// 监听message变量变化做出响应
watch(message, (newval, oldval) => { console.log(newval); })
// 立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数。
const we = watchEffect(()=>{ // 这个回调函数引用的值，都会被监听 console.log(message.value); })
// 与 ref 和 watch 类似，也可以使用从 Vue 导入的 computed 函数在 Vue 组件外部创建计算属性
const computedMessage = computed(() => message.value + 'computed')
 
// reactive方法定义响应式变量
// 有了这个reactive的方法后，可以想定义多少就定义多少了，而且访问和修改也不需要通过点value的形式了

const book = reactive({

  author: 'test',

  year: '2022',

  price: '88'

 

})

 
// 定义一个普通函数
const getTitle = ()=>{ console.log('title')}
 
// 调用生命周期函数
onMounted(getTitle);
 
// 所有需要给模板或其它钩子函数使用的都需要在这里暴露出去 return { message, getTitle }
</script>
 
我的博客即将同步至腾讯云开发者社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=3cn0udci9ym88

相关文章

文章评论

栏目导航

点击排行

友情链接

官方微信