标签：const log suppNum watch 就够 state api vue3 console

vue3 正式版都发布这么久了，周边的生态也都支持了vue3。那还等什么呢，一起来了解一下这6个API吧

// 这是一个简单的组件
<template>
    <div class="hello">
        <h1 ref="h1Dom">果果帅吗？</h1>
        <button @click="handleChange('sup')">支持</button>
        <button @click="handleChange('opp')">反对</button>
        <h1>支持率：{{watchRatio}}</h1>
    </div>
</template>

<script>
import {
    computed, onMounted, reactive, ref, toRefs, watch, watchEffect,
} from 'vue'

export default {
    name: 'HelloWorld',
    props: {
        msg: String,
    },
    setup(props) {
        /**
       *变化一： v2组件生命周期与v3的生命周期对比
       * beforeCreate => setup
       * created => setup
       * beforeMount => onBeforeMounted
       * mounted => onMounted
       * beforeUpdate => onBeforeUpdate
       * updated => onUpDated
       * beforeDestroy => onBeforeDestory
       * destroyed => onUnMounted
       * errorCaptured => one rrorCaptured
       *
       * 变化二：响应式数据
       * V2 采用的是Object.defineProperty,来进行数据劫持
       * V3 采用的是复制类型用Proxy Reflect 代理，简单数据类型采用V2
       * V3对应的基本相应是API有
       * ref
       * reactive
       * readonly
       *
       * 变化三：v2 options API变成方式 v3 composition API函数编程方式更侧重于js代码逻辑
       *
       *
       *  */

        // setup中没有this 只有能拿到props props 是基于Proxy 响应式数据
        console.log(props) //= > Proxy{msg: "Welcome to Your Vue.js App"}
        // console.log(this) //= > undefined

        // 响应式数据一：ref
        const age = ref(30)
        // console.log(age) //= >RefImpl{_rawValue: 30, _shallow: false, __v_isRef: true, _value: 30}
        // 响应式数据二：reactive 基于Proxy响应式数据
        const state = reactive({
            suppNum: 0,
            oppNume: 0,
        })
        console.log(state) //= >Proxy{suppNum: 0, oppNume: 0}
        // 响应式数据三：readonly 只读属性，基于Proxy响应式数据
        // const copyState = readonly({
        //     supNum: 0,
        //     oppNum: 0,
        // })
        // console.log(copyState.supNum = 100) //= > Set operation on key "supNum" failed: target is readonly. {supNum: 0, oppNum: 0}

        // 监听数据方法
        // 监听一：
        /**
         * 监听单个值 可以使用下面的简写方法
         */
        watch(age, (newVal, oldVal) => {
            console.log('watch--', newVal, oldVal)
        })
        /**
         * 监听 reactive里面的某一个元素 第一个参数则需要是函数的返回式
         */
        // watch(() => state.suppNum, (newVal, oldVal) => {
        //     console.log('state-watch--sup', newVal, oldVal)
        // })
        /**
         * 监听 state值 则可以采用单个值的方法
         */
        watch(state, (newVal, oldVal) => {
            console.log('watch-state', newVal, oldVal)
        })

        // 监听二：计算属性
        // 计算支持和反对的比例
        const comRatio = computed(() => {
            let ratio = 0
            const total = state.suppNum + state.oppNume
            if (total == 0) {
                ratio = '--'
            } else {
                ratio = `${(state.suppNum / total * 100).toFixed(2)}%`
            }
            return ratio
        })

        // 监听三：watchEffect 相当于钩子函数，加载的时候会执行一次，当函数内部依赖的响应式发生变化了就会在执行一次，此功能有类似计算属性的功能
        const watchRatio = ref('--')
        watchEffect(() => {
            const total = state.suppNum + state.oppNume
            if (total == 0) {
                watchRatio.value = '--'
            } else {
                watchRatio.value = `${(state.suppNum / total * 100).toFixed(2)}%`
            }
        })

        // 获取DOM元素 ref
        const h1Dom = ref(null)
        onMounted(() => {
            // dom元素获取
            console.log(h1Dom.value)
        })

        // 支持反对的方法
        const handleChange = (type) => {
            if (type === 'sup') {
                state.suppNum += 1
            } else {
                state.oppNume += 1
            }
        }

        return {
            ...toRefs(state),
            comRatio,
            watchRatio,
            handleChange,
            h1Dom,

        }
    },
}
</script>

// 这是main.js 就是这么简单，主要就是介绍全局指令和如何创建一个应用
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
// 增加全局自定义指令
app.directive('focus', {
    // 指令首次绑定到元素且在安装父组件之前 等同于 bind
    beforeMount(el, bingding, vnode, prevNode) { //= >bind
        console.log(el, bingding, vnode, prevNode)
    },
    // 安装绑定元素父组件时  等同于inserted
    mounted() {

    },
    // 在包含组件的VNode更新之前
    beforeUpdate() {

    },
    // 在包含组件的VNode及其子VNode更新后  等同于componentUpdated
    updated() {

    },
    // 在卸载绑定元素父组件之前
    beforeUnmount() {

    },
    // 指令与元素解除绑定且父组件已卸载时 等同于unbind
    unmounted() {},
})
app.mount('#app')

标签：const,log,suppNum,watch,就够,state,api,vue3,console
来源： https://blog.csdn.net/qq_42514643/article/details/117001042

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。