生命周期函数

• beforeCreate ： 在数据初始化之前 ， 在改函数中获取不到data中的数据
• created ： 在数据初始化完成之后 ， 可以获取、操作data中的数据 ajax在这里执行
• 寻找el || template 如果没有就报错
• beforeMonut ： 元素挂载之前 ，判断渲染模版是否正确
• mounted ： 挂载完成，元素显示 在这里面监听date change

• beforeUpdate ： 监听数据打算变化，改变数据之前
• updated ： 监听数据打算变化，改变数据之后

• beforeDestroy ： 组件销毁之前
• destroyed ： 组件销毁之后

🌞🌞 操作date在created中 操作DOM在mounted中

mounted中操作数据保证同步执行的方法

• this.$nextTick(() => {}) : 因为修改数据影响DOM是异步的，同步需要把之后的语句放在该函数中

组件

• 全局组件 Vue.component('sushaod',{ template: '<div> <p>sushaod </p> </div>' })
• <sushaod/> ： 组件的使用，只支持小写或则-
• 组件都是独立的，使用的数据和生命周期都是独立的
• 组件的data必须是函数return 出去一个对象

Vue.component('sushaod',{
     template: '<div> <p>sushaod </p> </div>',
      data(){
      return {
        sushaod: 'sushaod'
      }  
    }
 }
)

• 局部组件

• 定义组件 ： let sushaod = { template: '<div> <p>sushaod </p> </div>'}

• 注册组件 ： components: { sushaod:sushaod }

• 使用组件 ：<sushaod/>

• 组件都是独立的

• 组件间数据传递
  

• .sync ：

  
  

插槽

• 主要用于封装组件留出接口

• <slot> </solt>
  

• <Component is='组件名'> </Component> : 当中有属性is、后面跟组件名显示对应的组件 ， is可以动态绑定
• 当is切换的时候组件会不断的加载销毁 此时我们可使用<keep-alive></keep-alive> 组件包裹

父组件操作子组件的数据

• 给子组件添加ref执行子组件中的方法

组件的生命周期函数

• 组件的data修改只会触发自己的Updata函数 同时父组件的mouted也不会执行❌ 需要在父组件的mounted中添加$nextTick