vue2.0基本介绍_vue 2.0 介紹-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42454057/article/details/117426431

本文详细介绍了Vue.js中的数据响应式原理，包括基本的数据操作、响应式特例及其解决办法，如$forceUpdate和$set。通过实例展示了在不同生命周期钩子函数中的数据操作，并解释了v-bind和on事件修饰符的使用。此外，还讨论了watch、computed和methods的区别和应用场景，以及如何在组件中监听和响应数据变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、基本的数据操作

数据驱动编程，不做DOM操作
响应性: 必须事先在data里定义好
响应特性的特例：
vm.fruits.length
vm.fruits[0] = ‘111’ // debug: vm.$forceUpdate()，解决办法可以采用数组的一些方法如split(0,1)
vm.obj.y = 200 // 给对象新增属性，得不到响应 debug: vm.$set(vm.obj, ‘y’, 200) or Vue.set(vm.obj, ‘y’, 300)
BUG原因：Object.defineProperty()，不能监测数组的变化
vm.$set(vm.fruits, 0, ‘🍉’)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>getting-started</title>
  <script src="../vue.js"></script>
</head>
<body>
  <div id="root">
    <div>
      <!-- <input 
        type="text" 
        v-bind:value="task"
        v-on:input="handleInput"
      > -->
      <input 
        type="text"
        v-model="task"
        v-on:keyup.enter="handleKeyUp"
      >
    </div>
    <!-- 插值表达式 -->
    <!-- {{ title }} -->
    <ul>
      <li v-for="(task, index) of tasks">
        {{task}} <button v-on:click="handleClick(index)">X</button>
      </li>
    </ul>
  </div>
  <script>
    // 实例化Vue, options
    new Vue({
      el: "#root", // root节点
      data: { // 数据源
        title: 'hello world!!',
        task: '',
        tasks: [
          '吃饭',
          '睡觉',
          '打豆豆'
        ]
      },
      methods: { // 方法
        // handleInput(e) {
        //   this.task = e.target.value
        // }
        handleKeyUp() {
          // 操作task
          this.tasks.push(this.task)
          this.task = ''
        },

        handleClick(index) {
          this.tasks.splice(index, 1)
        }
      },
    })
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue instance</title>
  <script src="../vue.js"></script>
</head>
<body>
  <div id="root">
    {{title}}
    - 
    <!-- {{obj.x}} -->
    <ul>
      <li v-for="o,key in obj">
        {{key}} - {{o}}
      </li>
    </ul>
    <ul>
      <li v-for="f in fruits">{{f}}</li>
    </ul>
  </div>
  <div id="app">
    {{msg}}
  </div>
  <script>
    Vue.config.productionTip = false

    var vm = new Vue({
      el: '#root',
      data: {
        title: '',
        fruits: [
          '🍒'
        ],
        obj: {
          x: 100
        }
      }
    })
    vm.title = 'hello'

    var vm2 = new Vue({
      el: '#app',
      data: {
        msg: 'line 1'
      }
    })
  </script>
</body>
</html>

2、钩子

beforeCreate:使用在非响应性的初始化数据，最早调用ajax的钩子,可以访问未解析模板
created：可以初始化数据，可以使用ajax
beforeMount：可以再一次初始化数据,这里可以做ajax请求
mounted:dom：已经完成第一次渲染后,适合做ajax的地方
beforeUpdate：更新前可做的数据
updated：更新后可以做的数据
beforeDestroy：销毁绑定事件前
destoryed：销毁绑定的事件但并不销毁dom(vue2.0)，在vue3.0中销毁事件的同时销毁dom

v-bind:aaa => :aaa
on:click=“handler” => @:click=“handler”;

3、watch、computed、methods

watch:检测数据的变化才会执行。监听器，监听数据（data）的变化，做一件事。特别适合异步操作的场景
computed:计算函数依赖的值变化才会调用，有返回值若数据a=0，在下面又赋值a=0，则watch里的检测函数不执行
methds:模板渲染的值改变时会调用，事件处理函数

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>computed,methods,watch</title>
  <script src="../vue.js"></script>
</head>
<body>
  <div id="root">
    <!-- {{gender === 0 ? '女' : '男'}} -->
    {{title}}
    计算属性：{{filterGender}}
    方法：{{genGender()}}
    watch: {{newGender}}

    <div>
      <my-component :title="title"></my-component>
    </div>
  </div>
  <script>
    Vue.config.productionTip = false

    Vue.component('my-component', {
      props: ['title'],
      data() {
        return {
          newTitle: ''
        }
      },

      template: `
        <h1>{{title}} {{newTitle}}</h1>
      `,

      updated() {
        console.log(0)
        this.newTitle = this.title + '!!!' + new Date().getTime() + Math.random()
      },

      watch: {
        title(){
          this.newTitle = this.title + '!!!' + new Date().getTime()
        }
      }
    })

    var vm = new Vue({
      el: '#root',
      data: {
        title: 'hello world',
        gender: 0,
        extra: '人',
        newGender: ''
      },

      // 计算属性
      computed: {
        // getter函数
        // 根据依赖自动返回新的值，这个值可以是响应式的
        // 根据依赖缓存：依赖的值不发生变化，技术属性（函数）不调用
        // 计算属性一定要有返回值
        filterGender() {
          // console.log('filterGender')

          // const result = await fetch('./data.json')
          //   .then(response => response.json())
          //   .then(result => {
          //     return result.data
          //   })

          return (this.gender === 1 ? '男' : '女') + this.extra
        }
      },

      // 方法
      // 1、事件的处理函数 2、代码的封装
      methods: {
        genGender() {
          // console.log('genGender')
          // return (this.gender === 1 ? '男' : '女') + this.extra
        }
      },

      // 监听器
      // 1、监听数据（data）的变化，做一件事
      // 2、特别适合异步操作的场景
      watch: {
        // gender(newValue) {
        //   this.newGender = (this.gender === 1 ? '男' : '女') + this.extra
        // }
        gender: {
          handler(newValue) {
            console.log(0)
            fetch('./data.json')
              .then(response => response.json())
              .then(result => {
                this.newGender = (this.gender === 1 ? '男' : '女') + this.extra + result.data
              })
          },
          immediate: true
        }
      },

      mounted() {
        // setTimeout(() => {
        //   this.gender = 0
        // }, 2000)
        // setTimeout(() => {
        //   this.extra = '孩'
        // }, 3000)
        // this.title = 'world'
        this.gender = 0
        this.title = '~~~'
      },
    })
  </script>
</body>
</html>