Vue3教程 3.响应式ref函数

我们使用Vue3的setup,触发数据改变,但是数据不会及时更新到页面上,代码如下;

  

{{ title }}

{{ num }}

  • {{ category }}
export default {
  name: 'App',
  setup(){
    let title = '商品分类';
    let num = 30;
    let categorys = ['女装', '男装', '家电'];
    return {
      title,
      num,
      categorys,
      hello () {
        num += 1;
        categorys.push('数码');
      }
    }
  }
}

在Vue2定义的数据默认响应式,更改过数据后页面自动更新。但在Vue3的setup做响应式需要额外用上ref,代码如下:

import {ref} from 'vue';

export default {
  name: 'App',
  setup(){
    let title = ref('商品分类');
    let num = ref(30);
    let categorys = ref(['女装', '男装', '家电']);
    return {
      title,
      num,
      categorys,
      hello () {
        num.value += 1;
        categorys.value.push('数码');
      }
    }
  }
}

被ref包裹之后会返回RefImpl对象,使用时必须用.value

// 复杂对象包裹
let prodcut = ref({
    title: '电视机',
    sku: [{
        count: 2,
        title: '红色'
    }]
});
// 修改数据
let hello = () => {
	prodcut.value.sku[0].title = '蓝色';
}

return {
    prodcut,
    hello
}

你可能感兴趣的:(Vue3,Vue,前端,Vue3)