ref与watchEffect的用法

hamimelon2020

已于 2022-03-03 11:52:21 修改

阅读量384

点赞数

分类专栏： vue JavaScript 文章标签： vue.js javascript 前端

于 2022-03-03 11:37:51 首次发布

本文链接：https://blog.csdn.net/weixin_40945354/article/details/123249960

版权

本文探讨了在Vue.js应用中使用ref和watchEffect时遇到的问题及解决方法，通过实例分析了它们的正确用法，揭示了在绑定元素和响应式观察时可能遇到的常见陷阱。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<div id="app">
count: {
   {
   count}}
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const {
    ref, watchEffect } = Vue;
    const state = ref(0)
    watchEffect(() => {
   
      document.body.innerHTML = `count is ${
     state.value}`
    })
//const vm = app.mount('#app')

//console.log(vm.title)

</script>
</html>

为什么这个button不出来

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<div id="app">
<p>count: {
   {
   count}}</p>
<button @click="state.count++"></button>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const {
    ref, watchEffect } = Vue;
    const state = ref(0)
    watchEffect(() => {
   
      document.body.innerHTML = `count is ${
     state.value}`
    }