Vue3核心语法

61 阅读1分钟

setup

setup(){
    // 数据
    let name = ref("vale")
    let age = ref(22)
    let sex = ref("male")
    let university = ref("MIT")
   
    // 方法
    function changeName(){
        name = "张三"
    }
    function changeAge(){
        age += 1
    }
    function showSex(){
        alert(sex)
    }
    
    
    return {
        // 向template板块提供的变量
        a:name,  
        b:age, // a和b是向外暴露的变量
        sex, // 等价于sex:sex, 简写模式下直接写成sex,即可运行(推荐写法)
        
        // 向template板块提供的方法
        changeName,
        changeAge,
        showSex,
    }
}

非响应式 VS 响应式

setup(){
    //非响应式数据
    let name = "vale"
    let age = 22
    let sex = "male"

    //响应式数据
    let name = ref("vale")
    let age = ref(22)
    let sex = ref("male")
}

使用了响应式数据后,template板块将接收到的是RefImpl对象,但是这个对象的使用不需要加.vale,直接使用这个对象的名称即可。如:写{{name.value}}会报错,写{{name}}即可