Vue实例的常用选项

用new Vue()创建实例的时候,里面传递的参数一个对象,该对象有很多默认的属性。

const app = new Vue({
    
    
    el:'#app'; //用于挂载要管理的元素
    data:{
    
    };//定义数据。可以是自己定义的,也可也是服务器请求来的
    methods:{
    
    },  //调用几次就会执行几次,没有缓存,性能不好。
    computed:{
    
    },//计算属性用于简便的对数据进行变换,可不加小括号()。
    components:{
    
    cpn1:cpnC,cpn2:`<div></div>`}, //注册局部组件
    filters:{
    
    function},//过滤器,在调用数据时比如{
    
    {data|function}},可将data传入function中显示改变后的值
    watch:{
    
    data中的属性:function(newValue,oldValue){
    
    }} //监听data中数据改变的话会做出一定的反应。
	生命周期函数。。。
})

computed和methods的区别

其中computed和methods是初学者经常弄混的一个点。

  • methods定义的是该实例所拥有的方法。
  • computed所定义的则是一个属性(类似于data里保存的变量,只是这个变量由于data中的数据发生变化而得来),他定义的不是方法。属性对应的是一个对象,其含有get和set方法。当调用计算属性时,会自动调用get函数,所以可以不加小括号。但是计算属性很少用到set,所以便简写。
  • 计算属性是有缓存的。如:如果系统检测到firstname和lastname没有发生改变,可以直接用原来的fullname,而不用重新调用fullname中的get。methods是每次调用必重新执行一次。
//完整写法(当data里定义了firstname和lastname属性时)
fullname:{
    
       //此时fullname是只读属性,fullname属性本质对应的值是一个对象,对象会自动调用get,所以可不加小括号。
    get:function(){
    
      
		return this.firstname + this.lastname   //调用属性返回的值
    }
}
//简写
fullname:function(){
    
    
    return this.firstname + this.lastname
}
---------------------------------------------------
fullname:{
    
      //此时fullname属性可读也可写入
    set:function(newValue){
    
    
        const names = newValue.split(' ')
		this.firstname = names[0];
        this.lastname = names[1];
    }
    get:function(){
    
    
		return this.firstname + lastname
    }
}
app.fullname = "kobe bryant"  //即可改变data中firstname和lastname的值

watch

watch只能监听data数据发生变化,如果对象内部属性发生变化他是检测不到的,除非设置deep:true

watch:{
    
    
        obj.name{
    
    
            function(){
    
    },
            deep:true                //设置deep可以让watch监听到对象内部
        }
}

猜你喜欢

转载自blog.csdn.net/Pinoochio/article/details/112919454