element-plus为什么要使用const checked1 = ref(true)？直接checked1=true不行吗？

Question

如题，我百度了下，因为ref是响应式的，当里面的值变更时，页面也会同步更新。但是我也尝试了普通的<input type=checkedbox checked=flag>，当我在methods里切换flag 的true/false状态时，页面控件的勾选状态也就发生改变。既然如此，为什么还要用ref()函数？？还是说因为使用了element-plus的组件所以必须用ref？

Answer 1

多年后，你会为你提的这个问题羞愧的。
checked 在 普通 input 上只是一个属性，初始值。
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/inp...

Answer 2

看了一下，就是双向数据流和单向数据流的区别

Answer 3

ref的意思这个变量会跟随页面一起动态变化
checked1=true达不到checked1跟着变化
就这么一个作用

Answer 4

我注意到题目中的 methods ，那么我先认为你使用的 options 的写法，类似

<script lang="ts">
import {defineComponent} from 'vue'

export default defineComponent({
  data() {
    return {
      checked: false,
    };
  },
  methods: {
    toggleChecked(){
      this.checked = !this.checked
    },
  },
});
</script>

<template>
  <div>
    <el-checkbox v-model="checked">Test</el-checkbox>
    <div>
      <el-button @click="toggleChecked">Toggle</el-button>
    </div>
  </div>
</template>

<style scoped>

</style>

你可以点击 playground 试一下。

在这段代码中，data 返回的内容已经是响应式内容了，所以当点击按钮触发 toggleChecked 时，checkbox 的选中状态会跟着变化。

---

我还注意到题目中的 ref ，所以我在这里说一下使用 composition-api 的情况。

<script setup lang="ts">
import {ref} from 'vue'

const checked = ref(false)

function toggleChecked() {
  checked.value = !checked.value
}
</script>

<template>
  <div>
    <el-checkbox v-model="checked">Test</el-checkbox>
    <div>
      <el-button @click="toggleChecked">Toggle</el-button>
    </div>
  </div>
</template>

<style scoped>

</style>

你可以点击 playground 试一下。

在这段代码中，使用 ref 构建了一个响应式数据，当点击按钮触发 toggleChecked 时，checkbox 的选中状态会跟着变化。

---

如果你好奇不使用 ref 是什么效果，我们也可以简单试一下，你可以点击 playground 看一下效果。