Vue实例及一些方法和属性

vue实例的生成

var vm = new Vue({
  data:{
    message: 'hello vue!',
  },
});

使用 new Vue(…)生成实例的时候,data中的属性会被自动添加到‘响应系统’中去,当数据发生变化时页面会做出响应,显示最新的值。
在实例生成后添加的属性不会被添加到‘响应系统’中去。如果不想属性被添加到’响应系统’中,可以使用Object.freeze(),冻结属性,被冻结的属性无法被修改。

<div id='app'>
 {{userInfo.name}}
 <button v-on:click='>修改姓名</button>
</div>

let userInfo = {
  name: 'ian',
  age: 21,
  };

Object.freeze(UserInfo);

var vm = new Vue({
  data: {
    id: '#app',
    userInfo
  },
  methods: {
    handleClick: function(){
      this.userInfo.name = 'tom';
    },
  },
});

点击按钮页面没有发生变化,name没有被修改

属性和方法

除了用户自定义的属性和方法外,Vue实例本身也提供了一些属性和方法,它们以$开头,以便与用户属性区分,如$el、$children、$data等。

$.watch用于监听data属性的变化,可以在属性发生变化的时候做一些事情

<div id='app'>
  {{val}}
</div>

<script>
  var vm = new Vue({
    el: '#app',
    data: {
      val: 'default value',
    },
  });

  vm.$watch('val',function(){
     console.log(`监听到val发生变化,新的值为: ${val}`);
  });
</script>