vue中created、mounted等方法整理

本文详细解析Vue.js中created、mounted、methods、watch和computed的使用场景与执行顺序,重点介绍如何在地图层上利用这些特性进行矢量数据的加载与绘制。通过实例展示,帮助读者理解Vue组件的生命周期及其在地图应用开发中的实际应用。

created:html加载完成之前,执行。执行顺序:父组件-子组件

mounted:html加载完成后执行。执行顺序:子组件-父组件

methods:事件方法执行

watch:watch是去监听一个值的变化,然后执行相对应的函数。

computed:computed是计算属性,也就是依赖其它的属性计算所得出最后的值


export default {
     name: "draw",
     data(){      // 定义变量source        
       return {
         source:new ol.source.Vector({wrapX: false}),

       }
     },
    props:{ //接收父组件传递过来的参数
      map:{
        //type:String
      },

    },

mounted(){   //页面初始化方法
    if (map==map){

    }
    var vector = new ol.layer.Vector({
      source: this.source
    });
    this.map.addLayer(vector);

  },
  watch: {   //监听值变化:map值
    map:function () {
      console.log('3333'+this.map);
      //return this.map
      console.log('444444'+this.map);

      var vector = new ol.layer.Vector({
        source: this.source
      });
      this.map.addLayer(vector);
    }
  },
  methods:{   //监听方法  click事件等,执行drawFeatures方法
       drawFeatures:function(drawType){}
}

————————————————
版权声明:本文为优快云博主「liudoris」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.youkuaiyun.com/liudoris/article/details/80255311

Vue 中,createdmounted 是两个重要的生命周期钩子函数,它们在执行时机和可操作内容上存在明显区别: - **执行时机**:created 钩子函数在 Vue 实例初始化之后调用,此时实例已经创建完成,数据观测、`property` 和 `method` 的计算、`watch/event` 事件回调都已经完成,但组件尚未挂载到 DOM 上 [^4]。而 mounted 钩子函数在组件被挂载到 DOM 后触发,即组件已经渲染完成,并且对应的 HTML 元素已经插入到页面中 [^2]。 - **可操作内容**:在 created 钩子中,可以访问到数据和方法,但不能访问 DOM,因为组件还没有被挂载 [^5]。而在 mounted 钩子中,可以进行 DOM 操作、第三方库的初始化、需要访问 DOM 元素的操作以及基于 DOM 的事件绑定等 [^5]。 - **服务端渲染情况**:如果使用服务端渲染(SSR),created 钩子在服务器端和客户端都会执行,而 mounted 钩子只会在客户端执行 [^5]。 - **Vue3 组合式 API**:在 Vue3 的组合式 API 中,`setup` 函数中的代码会在 created 之前执行,所以不再需要显式的 created 钩子,可直接在 `setup` 中编写代码 [^5]。 ### 代码示例 ```vue <template> <div> <p ref="myParagraph">{{ message }}</p> </div> </template> <script> export default { data() { return { message: 'Hello, Vue!' }; }, created() { // 可以访问数据 console.log('Created:', this.message); // 不能访问 DOM,以下代码会报错 // console.log(this.$refs.myParagraph); }, mounted() { // 可以访问数据和 DOM console.log('Mounted:', this.message); console.log('DOM element:', this.$refs.myParagraph); } }; </script> ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值