Vue生命周期

修改实例上的数据

vm.$set(vm.movie: 'adress', '华联') vm.$set(target, 属性名, 属性值)
Vue.set(targrt, 属性名, 属性值) 这两个都可以给VUE追加自定义数据
this.set(this.movies, 'address', ‘上海’)  (在事件里)
在方法里添加
vm.$set(vm.arr, 0, 'learn')

数组变异方法(改变原数组)

vm.hobby.splice(2, 0, 'qwe')替换
vm.hobb.pop() 删除最后一个
push()
shift()
unshift()
sort()
reverse()

数组不改变原数组(返回一个新数组)

filter()
concat()
slice()

表单修饰符(可以连用)

v-model.trim 去掉前后空格
v-model.lazy 失去焦点
v-model.number  只识别数字

事件修饰符(可连用)

@click.prevent="sub" 阻止浏览器默认行为
.stop  阻止冒泡 
.once 只触发一次
.self 在自身出发

按键修饰符(可连用)

.enter
.tab
.up
.down
.left
.right
例子 @keyup.enter=""

计算属性(用它的值)(有缓存)(没办法传值)

{{reverseStr}}(方法一)属性的调用
conputed: {
    reverseStr() {
        return this.msg.split(''),reverse().join('')
    },
    address: {
        set(){
            要修改原有的属性
        },
        get(){
            return 
        }
    }
}
{{reverseStr}()}  (方法二) 方法的调用 (需要传参时用)
methods: {
    reverseStr() {
        return this.msg.split(''),reverse().join('')
    }
}这个方法比computed性能低,没有缓存

watch {} 监听(一个值影响多个值的时候)

监听data里面的属性改变的时候才会触发
msg(newVal, oldVal) {
    this.rerser(data新定义) = newVal.split(''),reverse().join('')
}

vue生命周期

在使用new Vue()创建一个Vue实例,在vue构造函数内部发生的事情
Vue的三个阶段
1 创建阶段
   1)收集配置项 ,初始化时间   --- beforeCreate()
     此时的this.$el  this.$data   === undefined
   2) 把配置项分配项到实例,但el没有挂载    ------created()
     this.$el == undefined  this.$data可访问到
     (在这个钩子函数中可以请求数据)
     (第一找 如果没有template(模板))第二找如果没有没有el 这个周期是没有的,停留在这个周期 。render优先级最高
   3)beforeMount()  根据模板和数据生成虚拟的dom,存在内存中
   4)mounted() 把内存里面的虚拟dom 替换了模板,有了真实的dom,el挂在完毕(可以操作dom了,比如一进页面获取input的焦点)
2更新阶段(多次触发)
    1)beforeUpdate  数据改变
    2) updated  视图已经改变
3销毁阶段
    1)beforeDestroy()  销毁前
    2) destrooyed()  销毁后
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 什么是生命周期? Vue实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→...
    travelClark阅读 2,611评论 0 36
  • Vue 实例 在文档中经常会使用 vm 这个变量名表示 Vue 实例,在实例化 Vue 时,需要传入一个选项对象,...
    鄙人才疏学浅阅读 603评论 0 1
  • 写在最前面 一直都想在更新博客但是都因为懒放弃了,看了无问西东之后找了点正能量,更新起来 vue从出生到现在,从一...
    StevenTang阅读 1,896评论 2 9
  • vue的生命周期 遇到的一个问题 在我的项目中,常用的生命周期钩子函数一直都是mounted,对于大部分情况,都是...
    盖伦_2985阅读 1,357评论 0 1
  • 早睡早起,晨起一杯水,水要慢慢的一点一点喝。 早睡,现在快10点半了,晚安啦 可惜字数还没到 今天吃了吃了好吃的红...
    三金二木夕阅读 218评论 1 1