• VUE常用的钩子函数


    beforeCreate

    这个时候,this变量还不能使用,在data下的数据,和methods下的方法,watcher中的事件都不能获得到;

     beforeCreate() {
       console.log(this.page); // undefined
       console.log{this.showPage); // undefined
     },
     data() {
       return {
         page: '第一页'
       }
     },
     methods: {
       showPage() {
         console.log(this.page);
       }
     }
    

    created

    这个时候可以操作vue实例中的数据和各种方法,但是还不能对"dom"节点进行操作;

      ...,
      created() {
        let btn = document.querySelector('button')
        console.log(btn.innerText)  //此时找不到button节点,打印不出来button的值
      }
    

    mounted

    这个时候挂载完毕,这时dom节点被渲染到文档内,一些需要dom的操作在此时才能正常进行。
    注意:mounted在整个实例的生命周期中只执行一次。

      ...,
      mounted() {
        let btn = document.querySelector('button')
        console.log(btn.innerText)  //此时可以打印出来button的值
      }
    

    computed

    是把所有需要依赖其他值计算的值写成对象的key值。

      data() {
        return {
          count: 1
        }
      },
     computed: {
        //是最后需要计算的值,而这个值依赖this.count 
        //那么这个值要写在对象的key值的位置
        countDouble: {
          get: function() {
            return this.count * 2
          },
          set: function(newValue) {
            this.countDouble = newValue
          }
        }   
      }
    

    这时候模板渲染的{{countDouble}}这个值是2

    注意:通过计算的countDouble这个变量不需要在data里面声明,如果声明了就会报错

    watch

    把监听的值写成对象的key值

     data() {
        return {
          count: 1
        }
      },
      watch: {
        count: (val, oldVal) => {
          console.log('new: %s, old: %s', val, oldVal)
        }
      }
    

    这时候如果this.count发生了改变,那么监听count变量发生变化的function就会被执行

    注意:需要监听的这个变量需要在data里面声明,如果不声明就会报错

     
     
  • 相关阅读:
    Admin注册和路由分发详解
    自定义Xadmin
    苑昊老师的博客
    pip 国内源 配置
    Django模型层(2)
    Django 中间件
    Django form表单
    整理的最全 python常见面试题(基本必考)
    AJAX
    Cookie、Session和自定义分页
  • 原文地址:https://www.cnblogs.com/sea520/p/11756910.html
走看看 - 开发者的网上家园