Vue生命周期方法

3.vue生命周期方法

components :{
  // 声明子组件，这个子组件需要先导包，看图1_compenents用法
}，
data() { 
    // 调用data()函数,return返回初始数据的一个全新副本数据对象，看图2_data()的用法
    // 这里的值是初始化的，或者说进行定义的，而且这里的值一般就和html里面的控件的值进行双向绑定
    return{
      // name: 'haiphon',
    }
},
created() {
    //在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
    // this.name = '没渲染前我喊做小鸡快跑'
},
mounted() {
  // mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作，这个方法内document.getElementById("name")可以拿到值,我在这里进行数据初始化
 // initData()
},
method:{
    ...// 每次更新页面的时候执行
    // 几乎所有的方法都放在这里，例如点击事件回调方法，加载数据的方法，或者某些控件的显示值需要提前处理的也可以放在这里。
},computed:{// 这个方法和wathc的用法这个blog写的比较清楚：https://www.jianshu.com/p/bb7a2244c7ca
    ...// 第一次执行，后面当依赖的属性发生改变的时候执行
   // 某些控件的值显示前需要先进行处理的，而且这个相关值可能会变化的，那可以在这里写方法，优势在于如果依赖属性变了会自动执行，性能有优化。
    testName () {
      console.log('new name')
      return `${this.name}`+'哈哈哈哈哈'
    }
},watch:{
    // value3是已经在data中定义的属性，value是该属性发生改变时候的值。
    value3:function(value) {
        alert("现在的value："+value);
    }
}

图1_compenents用法.png

图2_data()的用法.png

4.export和export default都用于导出模块，Vue的单文件组件通常需要导出一个对象，这个对象是Vue实例的选项对象，以便于在其他地方可以使用import引入。区别在于export可以导出多个，export default只能导出一个默认模块，这个模块可以匿名。
例如：

/**
 *export用法
 **/
// exportDemo.js 声明导出的文件
export const str = 'hello world'
export function f(a) {
    return a+1
}
// importDemo.js 声明引用的文件
import {str, f} from 'exportDemo'
//------------------------------------

/**
 * export default用法
 **/
// exportDemo2.js 声明导出的文件
export default {
    a: 'hello',
    b: 'world'
}

// importDemo2.js 声明引用方式,这里的"obj"是任意取得名字，也不用大括号括起来
import obj from 'exportDemo2'