vue3 选项式 与 组合式 写法

选项式

<template>
    <h1>{{ title }}</h1>
    <h3>{{ titlestr }}</h3>
    <input type="radio" v-model="user.male" name="male" value="1">男
    <input type="radio" v-model="user.male" name="male" value="0">女
    {{ user.malestr }}
    <button @click="handleClick">点我</button>
</template>

<script>
/* 选项式 */
export default({
    // 响应式数据
    data(){
        return {
            title:"我是文章页面1111",
            user:{
                male:0,
                malestr:"女"
            }
        }
    },
    
    // 生命周期方法
    created(){
        console.log("进来了....")
    },
​
    // 计算属性
    computed:{
        titlestr(){
            return this.title.split("").reverse().join("");
        }
    },
​
    //监听属性
    watch:{
    //    "user.male":function(newvalue){
    //         this.user.malestr = newvalue==0?"女":"男"
    //    } 
​
        "user.male":{
            immediate:true,
            handler(newvalue){
                this.user.malestr = newvalue==0?"女":"男"
            }
        }
    },
​
    // 定义方法
    methods:{
        handleClick(){
            alert(1)
        }
    }
   
})
</script>

组合式

<template>
    <h1>{{ titleRef }}</h1>
    <div>{{ contentReactive.cnt }}</div>
    <h4>{{ titlestr1 }}</h4>
    <h4>{{ titlestr2 }}</h4>
    <hr/>
    <h3>{{ userReactive }}</h3>
    <input type="radio" v-model="userReactive.male" name="male" value="1">男
    <input type="radio" v-model="userReactive.male" name="male" value="0">女
    <button @click="handleClick">点我</button>
    <hr>
    <ksd-card></ksd-card>
    <ksd-card></ksd-card>
    <ksd-card></ksd-card>
</template>

<script setup>
    import { computed, onMounted, reactive, ref, watch, watchEffect } from "vue"
    // 1：响应式数据-ref
    // 定义ref 修改必须.value,使用直接使用
    const titleRef = ref("我是文章页面1111")
    const contentReactive = reactive({cnt:"我是文章内容1111"})
    // 2：响应式数据-reactive
    const userReactive = reactive({id:1,name:"zhangsan",male:1,malestr:"男"})
​
    // 3：定义事件方法
    const  handleClick = ()=>{
        titleRef.value = "改我，还一个标题吧!!!"+Math.random()
        userReactive.id = 2
        contentReactive.cnt = "xxxx"
        userReactive.name = "lisi"
    }
​
    // 4: 查询加载页面数据
    const handleLoad = ()=>{
        console.log("数据加载...")
    }
​
    // 5：生命周期 
    onMounted(()=>{
        handleLoad();
    })
​
    // 6:计算属性
    const titlestr1 = computed(()=>titleRef.value.split("").reverse().join(""))
    const titlestr2 = computed(()=>titleRef.value.split("").reverse().join(""))
   
​
    // 7: 监听某个对象属性的编号--reactive
    // watch(
    //   ()=>userReactive.male,
    //   (newvalue, oldValue) => {
    //     userReactive.malestr = newvalue==1?"男":"女"
    // },{ deep: true,immediate:true})
​
    // 8: 监听某个对象属性的编号--ref
    // watch(titleRef,(newval,oldvalue)=>{
    //     console.log(newval,oldvalue)
    // },{ deep: true,immediate:true})
​
    // 9：响应式数据的关联监听。
    watchEffect(()=>{
        //console.log(titleRef.value)
        //console.log(userReactive.male)
    })
</script>