首页 > 编程笔记

Vue ref()函数的用法

在 Vue 中,reactive() 函数为一个 JavaScript 对象创建响应式代理。如果需要对一个原始值创建一个响应式代理对象,可以通过 ref() 函数来实现。

ref() 接收一个原始值,返回一个响应式和可变的响应式对象,它的用法如下。
<div id="app">
    <post-item :post-content="content"></post-item>
</div>
<!--引入Vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
    const {ref, watchEffect} = Vue;
    const state = ref(0)
    watchEffect(() => {
          document.body.innerHTML = '商品库存为: ${state.value}台。'
    })
</script>
在 Chrome 浏览器中运行程序,按 F12 键打开控制台并切换到 Console 选项,输入“state.value = 8888”后按回车键,效果如下图所示。


图 1 使用ref()函数

注意,程序中修改的是 state.value 的值,而不是直接修改 state 对象。

推荐阅读

副业交流群 关注微信公众号,加入副业交流群,学习变现经验,交流各种打法。