nicenote/docs/fea/vue/pattern.md

1.3 KiB
Raw Blame History

nav group
title path
前端 /fea
title order path
💊 Vue 5 /vue

💊 Vue

渐进式单页应用框架,作者为华人尤雨溪,又称尤大、尤小右。毕业于建筑设计系(真不知道他的脑回路怎么长的...

从上手程度来说属于三大框架里最容易得。另外从vue2.7之后的版本支持了组合式开发开发方式更偏向于react对于react开发者来说更加友好。我猜尤大的目的是为了把react用户抢过来

由于我是 react 重度用户,文章大多数会以组合式开发讲解为主,除非有些特殊场景无法实现才会考虑选项式编程。

生命周期

和 react 相似的生命周期,可以在这些钩子中注入自己需要的事件,从而改变视图。

onMounted

在组件挂载后执行,判断是否挂载的依据如下:

  1. 所有同步子组件已经被挂载不包含异步组件与Suspense
  2. 自身的 DOM 树已经创建并且插入了父容器中。

在服务端渲染期间不会被调用。

<script setup>
import { ref, onMounted } from 'vue'

const el = ref()

onMounted(() => {
  el.value
})
</script>

样例参考

https://cn.vuejs.org/examples/#hello-world