分享Vue3.0高阶实战:开发高质量音乐Webapp完整

获取资料点击这里:Vue3.0高阶实战:开发高质量音乐Webapp

创建一个Vue3.0的项目

    1、npm init vite-app vue3.0

    2、cd vue3.0

    3、npm install

    4、npm run dev

分享Vue3.0高阶实战:开发高质量音乐Webapp完整

    此时,项目已经创建成功!!!!


接下来,我们先来体验一下Vue3.0的新东西

❤️    Object.defineProperty => Proxy

        重构了虚拟

        DOMOptionApi => Composition API

1、setup()      beforeCreate 、created 之前执行

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

2、ref()  声明单一基础数据类型  返回值是响应式对象

     创建一个响应式的数据对象,ref() 函数调用的返回值是一个对象,这个对象上只包含一个 value 属性, 只在setup函数内部访问ref函数需要加.value

3、reactive()   声明单一对象  (注意:解构会破坏代理proxy即双向绑定)

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

4、isRef()   判断是否是通过ref()函数创建出来的对象

5、toRefs()   从组合函数返回反应对象

    toRefs() 函数可以将 reactive() 创建出来的响应式对象,转换为普通的对象,只不过,这个对象上的每个属性节点,都是 ref() 类型的响应式数据

6、computed()    计算属性 可创建只读,和可读可写两种

    1)  只读           let fullName = computed(() => msg.value + '~' + name)    

    2)可读可写    let fullName2 = computed({      get: () => number.value + state.step,      set: (v) => number.value = v    })

7、watch()

    watch 函数用来侦听特定的数据源,并在回调函数中执行副作用。默认情况是懒执行的,也就是说仅在侦听的源数据变更时才执行回调。

    1) 监听 reactive( )声明的数据

        单数据监听:    watch( ( )=> reactiveV.name, (n, o)=>{ })

        多数据监听:     watch([( )=> reactive.name, ( )=> reactive.sex], ([name, sex], [oldName, oldSex])=> { })

    2)   监听 ref( )声明的数据

         单数据监听:     watch(age,(n, o)=>{ })

         多数据监听:     watch([age, weight], ([newAge, newWeight], [oldAge, oldWeight])=> { })

    3)取消监听

          const stop = watch(age,(n, o)=>{ })

          setTimeout(() => {        stop() }, 1000)              // 一秒后取消对age的监听

8、LifeCycle Hooks(新的生命周期)

        onBeforeMount(() => {      console.log('onBeforeMount')    }) 

        onMounted(() => { console.log('onMounted') }) 

        onBeforeUpdate(() => {      console.log('onBeforeUpdate') }) 

        onUpdated(() => { console.log('onUpdated') }) 

        onBeforeUnmount(() => { console.log('onBeforeUnmount') })

        onUnmounted(() => { console.log('onUnmounted') })

9、Template refs    通过refs 来回去真实dom元素

        <h3 ref="h3">hello</h3>

        想要得到h3的dom 在2.x中 this.$refs.h3  在3.0中如下:

          1)在setUp函数中声明 let h3 = ref(null),并return出去h3

          2)在onMounted()函数中打印 h3.value你会得到(<h3 data-v-c5362648="">hello</h3>)

10、global Properties  vue3.0 的全局配置

        Vue 2.x  通过 Vue.prototype扩展

        vue3.0 通过app.config.globalProperties.$api = 'http://www.baidu.com'

        在setUp函数中通过 const { ctx } = getCurrentInstance()      ctx.$api ( http://www.baidu.com )

11、Suspense

    异步组件在默认情况下是可挂起的。这意味着如果它在父链中有一个 <Suspense>,它将被视为该 <Suspense> 的异步依赖。在这种情况下,加载状态将由 <Suspense> 控制,组件自身的加载、错误、延迟和超时选项将被忽略。异步组件可以选择退出 Suspense 控制,并通过在其选项中指定 suspensable:false,让组件始终控制自己的加载状态。

上一篇:Docker容器互联


下一篇:Angular完整项目开发6 - 添加全局变量