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>

<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 对象。

Vue ref()函数的用法

相关文章