如何快速上手Vue3

这篇文章主要讲解了“如何快速上手Vue3”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“如何快速上手Vue3”吧!

目前成都创新互联已为千余家的企业提供了网站建设、域名、虚拟主机绵阳服务器托管、企业网站设计、下陆网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。

Vue2 与 Vue3 的对比

  • 对 TypeScript 支持不友好(所有属性都放在了 this 对象上,难以推倒组件的数据类型)

  • 大量的 API 挂载在 Vue 对象的原型上,难以实现 TreeShaking。

  • 架构层面对跨平台 dom 渲染开发支持不友好

  • CompositionAPI。爱 ReactHook 启发

  • 更方便的支持了 jsx

  • Vue 3 的 Template 支持多个根标签,Vue 2 不支持

  • 对虚拟 DOM 进行了重写、对模板的编译进行了优化操作...

一、setup 函数

setup() 函数是 vue3 中,专门为组件提供的新属性。它为我们使用 vue3 的 Composition API 新特性提供了统一的入口,  setup 函数会在 beforeCreate 之后、created 之前执行, vue3 也是取消了这两个钩子,统一用 setup 代替,  该函数相当于一个生命周期函数,vue 中过去的 data,methods,watch 等全部都用对应的新增 api 写在 setup()函数中

setup(props, context) {     context.attrs     context.slots     context.parent     context.root     context.emit     context.refs      return {      }   }
  • props: 用来接收 props 数据

  • context 用来定义上下文, 上下文对象中包含了一些有用的属性,这些属性在 vue 2.x 中需要通过 this 才能访问到, 在 setup()  函数中无法访问到 this,是个 undefined

  • 返回值: return {}, 返回响应式数据, 模版中需要使用的函数

二、reactive 函数

reactive() 函数接收一个普通对象,返回一个响应式的数据对象, 想要使用创建的响应式数据也很简单,创建出来之后,在 setup 中 return  出去,直接在 template 中调用即可

    import { defineComponent, defineAsyncComponent } from "vue";  const MyComponent = defineAsyncComponent(() => import('./Component'));  export default defineComponent({    components: {      MyComponent    },    setup() {      return {}    } })   

十二、vue 3.x 完整组件模版结构

一个完成的 vue 3.x 完整组件模版结构包含了:组件名称、  props、components、setup(hooks、computed、watch、methods 等)

   import { computed, defineComponent, getCurrentInstance, onMounted, PropType, reactive, ref, toRefs } from 'vue';  interface IState {   count: 0,   name: string,   list: Array }  export default defineComponent({   name: 'demo',   // 父组件传子组件参数   props: {     name: {       type: String as PropType,       default: 'vue3.x'     },     list: {       type: Array as PropType,       default: () => []     }   },   components: {     /// TODO 组件注册   },   emits: ["emits-name"], // 为了提示作用   setup (props, context) {     console.log(props.name)     console.log(props.list)       const state = reactive({       name: 'vue 3.0 组件',       count: 0,       list: [         {           name: 'vue',           id: 1         },         {           name: 'vuex',           id: 2         }       ]     })      const a = computed(() => state.name)      onMounted(() => {      })      function handleClick () {       state.count ++       // 调用父组件的方法       context.emit('emits-name', state.count)     }      return {       ...toRefs(state),       handleClick     }   } });      import { computed, defineComponent, getCurrentInstance, onMounted, PropType, reactive, ref, toRefs } from 'vue';  interface IState {   count: 0,   name: string,   list: Array }  export default defineComponent({   name: 'demo',   // 父组件传子组件参数   props: {     name: {       type: String as PropType,       default: 'vue3.x'     },     list: {       type: Array as PropType,       default: () => []     }   },   components: {     /// TODO 组件注册   },   emits: ["emits-name"], // 为了提示作用   setup (props, context) {     console.log(props.name)     console.log(props.list)       const state = reactive({       name: 'vue 3.0 组件',       count: 0,       list: [         {           name: 'vue',           id: 1         },         {           name: 'vuex',           id: 2         }       ]     })      const a = computed(() => state.name)      onMounted(() => {      })      function handleClick () {       state.count ++       // 调用父组件的方法       context.emit('emits-name', state.count)     }      return {       ...toRefs(state),       handleClick     }   } }); 

感谢各位的阅读,以上就是“如何快速上手Vue3”的内容了,经过本文的学习后,相信大家对如何快速上手Vue3这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联,小编将为大家推送更多相关知识点的文章,欢迎关注!


当前名称:如何快速上手Vue3
URL标题:http://scyanting.com/article/jcoehs.html