vue项目中常用的属性---随笔记录(三)

本次随笔是我用来记录自己认为常用的一些vue属性的浅薄认知

常用属性 :

               1.   data

                这个方法就是Vue内部通过Object.defineProperty方法属性拦截的方式，把data对象里每个数据的读写转化成getter/setter，当数据变化时通知视图更新,从而实现了双向绑定.方法调用时,必须通过this.某某来调用其属性值.

      

       2. created mounted

       要认识这二个函数,需要知道一个概念"生命周期",他们又被称作钩子函数 然而这二个同为钩子函数也是有区别和差异的

       差异:我较为通俗的理解为create是在模板未初始化是作用的,mounted则是模板初始化结束后再对值做覆盖.(菜鸡理解)

       create的运用场景一般是页面初始化就要加载列表 那么我们就可以在create时调用列表查询方法从而通过数据绑定将列表显示出来

       3. components

                           该属性又涉及到了vue的又一个运用  组件调用 比如，我想在首页加载轮播组件，但是又不想全局注册（因为不是每个页面都需要轮播功能）

        借鉴博客园  https://www.cnblogs.com/ming-os9/p/9004071.html的例子   

<template>  
 2     <div>  
 3         <!-- 3.在template中就可以直接使用了 -->  
 4         <testComponent></testComponent>  
 5     </div>  
 6 </template>  
 7   
 8 <script>  
 9     //1.先使用import导入你要在该组件中使用的子组件  
10     import testComponent from './testComponent.vue'  
11     export default {  
12         //2.然后,在components中写入子组件  
13         components: {testComponent},  
14         methods: {},  
15     }  
16 </script>  
17   
18 <style></style>  

<template>
    <div>
        <!-- 2.在template中使用 -->
        <testComponent></testComponent>
    </div>
</template>

<script>
    export default {
        //1.直接在components中写入子组件
        components: {
            testComponent:require('./testComponent.vue').default
        },
        methods: {},
    }
</script>

<style></style>

          4.  watch

            监听值的变化,当监听值发生变化时,就会触发  watch 方法 

            

 

          

 

        还有很多属性没有被谈及,这些只是我认为的较为基础的vue常用属性.下一随笔,我将记录一下父子传值的一些坑 vue项目中父子传值---随笔记录(四)