初学vue知识点总结

<script>
import RenameComponent1 from "../RenameComponent1.vue";
import RenameComponent2 from "../RenameComponent2.vue";
export default {
	data() {
		// data 是往自己组件内部，挂载一些私有数据
	    return {
	      name: "张三",
	      age: 18
	    };
	},
	// 父组件向子组件传递的数据写在这里
	props: ["max"],
	watch: {
	    // max的值变化时会立即执行函数
	    max: function(newVal, oldVal) {
	    
	    }
	},
	computed: {
		//计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值
		//计算属性会将结果缓存起来，这样做的好处就是，如果有一些业务的性能开销比较大，写在这里的话，
		//其他不同地方在使用的时候不会进行又一次的代码执行，而是直接拿到最终结果，提高效率，如果结果
		//不需要进行缓存的话，可以使用方法进行代替。和侦听属性不一样的是，计算属性时所依赖的值变化才会
		//执行函数，比如下面的代码，当firstName或lastName变化的时候才会触发
		fullName: function () {
      		return this.firstName + ' ' + this.lastName
    	}
	}
	// 生命周期钩子
	created() {},
	mounted() {
    	// 当组件中的DOM结构被渲染好并放到页面中后，会执行这个钩子函数
    	// 如果要操作元素了，最好在 mounted 里面，因为，这里时候的 DOM 元素 是最新的
  	},
	methods: {
		//这个组件所有的方法写在这里
		getName(){ return this.name;}
	},
	components: {
		//要使用其他组件，把导入的组件的名称写在这里
    	RenameComponent1,
    	RenameComponent2 
  	},
  	
}
</script>