自学vue第三天

watch监听属性

监听数据变化，执行一些业务逻辑或异步操作

data:{
	words: '苹果',
	obj: {
		fruit: '苹果'
	}
},

watch: {
	//该方法会在数据发生变化的时候，触发执行
	word (newValue, oldValue) {
		//一些业务逻辑或 异步操作	
	},
	'obj.fruit' (newValue, oldValue) {
		//一些业务逻辑或 异步操作	
	}
}

完整写法

watch: {
	'数据属性名': {
		deep: true ,//深度监视，包括该数据对象的属性一并监视
		immdiate: true ,//是否立刻执行一次handler(例如当页面第一次打开的时候直接请求一次)
		handler (newValue) {
			//具体的业务逻辑
		}
	} 
}

vue生命周期

四个阶段

1.创建 响应式数据在此阶段完成
2.挂载 页面的初次渲染，渲染模板，只有当挂载阶段完成之后，才能操作dom元素，dom的原生属性
3.更新阶段 数据修改，更新视图，用户操作的阶段
4.销毁阶段 当页面关闭的时候，通常会进行一些释放资源的操作，监听，定时器

同时对应四个阶段有八个勾子函数，用于程序员做一些业务逻辑

项目结构

项目的运行流程

//文件核心作用: 导入App.vue,基于App.vue 创建结构渲染index.html
//1. 导入Vue核心包
import Vue from 'vue'
//2. 导入App.vue 根组件
import App from './App.vue'

//用于网页console.log 提示当前处于什么环境(生产环境/开发环境)
Vue.config.productionTip = false
//3. Vue实例化,提供render方法 -> 基于App.vue 创建结构渲染index.html
new Vue({
  //el: '#app',   作用：和$mount('#app') 作用一致，用于指定Vue所管理的容器
  // render: h => h(App),
  //完整写法
  render(createElement, context) {
    //context上下文
    console.log(context)
    //基于App创建元素结构
    return createElement(App)
  }
}).$mount('#app')

组件化开发-组件

组件化：页面可拆分成一个个组件，每个组件有着独立的结构，样式，行为

根组件App.vue 整个应用最上层的组件，包裹所有其他组件

一个组件的基本结构

<!--结构-->
<template>
  <div>
  </div>
</template>
<!--行为-->
<script>
//导出的是当前组件的配置项
// 导出的是一个对象，可以包括data() ，methods computed watch等属性
export default {
  name: 'HelloWorld',
}
</script>
<!--样式-->
<style scoped>
</style>

组件的注册与使用