vue2和vue3的todolist比较

最新推荐文章于 2024-06-25 10:16:38 发布

mqy1023

最新推荐文章于 2024-06-25 10:16:38 发布

阅读量155

点赞数

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

本文链接：https://blog.csdn.net/mqy1023/article/details/120827224

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文对比了Vue2和Vue3中处理响应式数据的方法，包括使用v-model、v-for以及添加新项的操作。在Vue2中，通过data和v-model实现双向数据绑定，而在Vue3中，利用ref和reactive函数创建响应式数据。ref适用于基本类型，reactive用于处理对象。在添加Todo时，Vue3需通过.value访问ref的值，并在setup函数中定义方法。

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

一、vue2的写法

<template>
  <div id="app">
    <input type="text" v-model="val" @keyup.enter="addTodo">
    <ul>
      <li v-for="todo in todos" :key="todo.id">{{todo.title}}</li>
    </ul>
  </div>
</template>
<script>
export default {
  data(){
    return{
      val:'',
      todos:[ 
        {id:0, title:'吃饭', done:false},
        {id:1, title:'睡觉', done:false},
        {id:2, title:'lsp', done:false},
      ]
    }
  },
  methods:{
    addTodo(){
      this.todos.push({
        id:this.todos.length,
        title:this.val,
        done:false
      })
      this.val = ''
    }
  }
}
</script>

二、vue3的写法

ref() 一般存放的是基本类型数据, 用来根据给定的值创建一个响应式的数据对象，ref() 函数调用的返回值是一个被包装后的对象（RefImpl），这个对象上只有一个 .value 属性，如果我们在setup函数中，想要访问的对象的值，可以通过.value来获取，但是如果是在<template>模板中，直接访问即可，不需要.value

reactive()函数接收一个普通对象，返回一个响应式的数据对象，等价于 vue 2.x 中的 Vue.observable() 函数，vue 3.x 中提供了 reactive() 函数，用来创建响应式的数据对象Observer，ref中我们一般存放的是基本类型数据，如果是引用类型的我们可以使用reactive函数

<template>
  <div id="app">
    <input type="text" v-model="val" @keyup.enter="addTodo">
    <ul>
      <li v-for="todo in todos" :key="todo.id">{{todo.title}}</li>
    </ul>
  </div>
</template>

<script>
import {reactive, ref, toRefs} from 'vue'

export default {
  setup(){
    let val = ref('')
    let todos = reactive([ 
        {id:0, title:'吃饭', done:false},
        {id:1, title:'睡觉', done:false},
        {id:2, title:'lsp', done:false},
    ])
    function addTodo(){
      todos.push({
        id:todos.length,
        title:val.value,
        done:false
      })
      val.value = ''
    }
    return {val, todos, addTodo}
  }
}
</script>