• Vue2,Vue3,Vue-router

    1.vue获取dom元素节点

     mounted () {

        this.$refs.div1.style.backgroundColor="yellow"

        console.log(this.$refs.div1);

      }

    2.vue生命周期

    beforeCreate( 创建前 )

    这个时候，在实例被完成创建出来，el和data都没有初始化，不能访问data、method，一般在这个阶段不进行操作。

    beforeCreate () {

        console.log('beforeCreate');

        console.log(this.age);//undefined

        console.log(this.$el);//undefined

      }

    created( 创建后 )

    这个时候，vue实例中的data、method已被初始化，属性也被绑定，但是此时还是虚拟dom，真实dom还没生成，$el 还不可用。这个时候可以调用data和method的数据及方法，createf钩子函数是最早可以调用data和method的，故一般在此对数据进行初始化。或者开局获取页面请求数据的方法写在created里面。

    created () {

        console.log('created');

        console.log(this.age);//200

        console.log(this.$el);//undefined

      }

    beforeMount( 挂载前)

    此时模板已经编辑完成，但还没有被渲染至页面中（即为虚拟dom加载为真实dom），此时el存在则会显示el。在这里可以在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取。

    beforeMount() {

        console.log("beforeMount");

        console.log(this.age); //200

        console.log(this.$el); //undefined

      }

    Mounted( 挂载后)

    此时模板已经被渲染成真实DOM，用户已经可以看到渲染完成的页面，页面的数据也是通过双向绑定显示data中的数据。 这实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建好了，此时，如果没有其它操作的话，这个实例，就静静的躺在我们的内存中，一动不动。
     

     mounted() {

        console.log("mounted");

        console.log(this.age); //200

        console.log(this.$el); //

      }

    beforeUpdate(更新前)

    updated（更新后）

    beforeDestroy

    销毁前执行（$destroy方法被调用的时候就会执行）,一般在这里善后:清除计时器、清除非指令绑定的事件等等…’)

    destroyed

    销毁后 （Dom元素存在，只是不再受vue控制）,卸载watcher，事件监听，子组件。

    3.get和post区别

    1.功能不同

    get是向服务器请求数据。

    post是向服务器发送数据。

    2.过程不同

    (1)    get比post更加不安全，因为传送的参数直接暴露在URL上，所以不能来传送敏感信息。例如密码

    (2)    get参数通过URL传送，但是post是放在request body,请求体里面的。

    (3)    get请求在URL中传送的参数是有长度限制的，但是post没有；

    (4)    get请求的参数会保存在浏览器的历史记录中。

    (5)     get在浏览器回退时是无害的，但是post会再次提交请求；

    通俗来讲，一辆车子送东西，get把东西放在车顶上，不安全还放得少。post把东西放在车厢里，即安全空间又大

    4.v-if 和 v-show区别

    1、v-if 在条件切换时，会对标签进行适当的创建和销毁，而 v-show 则仅在初始化时加载一次，因此 v-if 的开销相对来说会比 v-show 大。

    2、v-if 是惰性的，只有当条件为真时才会真正渲染标签；如果初始条件不为真，则 v-if 不会去渲染标签。v-show 则无论初始条件是否成立，都会渲染标签，它仅仅做的只是简单的 CSS 切换。
     

    5.为什么data必须是函数，不能是对象

    1. 如果data是一个对象的话, 对象是一个引用类型; 它会在堆空间中开辟一片区域, 将内存地址存入. 这就使得所有的组件公共一个data, 当一个组件中修改了data中的数据就会出现一变全变的现象.

    2. 如果data是一个函数的话, 且使用return返回一个对象; 这就使得每复用一次组件就会返回一个全新的data(这就相当于scoped, 每一个组件data都是私有的, 互不干扰, 各个组件维护自己的data)

    一个组件一个data.一个data一个函数,一个函数一个作用域,一个作用域一个独立的数据.

    只有函数才有作用域的问题, 当组件被复用的时候; 函数与函数之间是有作用域的, 所以两个不同的作用域之间, 也是互不干扰的.

    函数的好处就是每一次组件复用之后都会产生一个全新的data. 组件与组件之间各自维护自己的数据, 互不干扰

    6.  v-for 后面写 :key的作用


    1.虚拟DOM中key的作用:
    key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DoN)】随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下:
    2.对比规则:
    (1).旧虚拟DOM中找到了与新虚拟DOM相同的key:
    1.若虚拟DOM中内容没变,直接使用之前的真实DOM !
    2.若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM.
    (2).旧虚拟DOM中未找到与新虚拟DOM相同的key
    创建新的真实DOM，随后渲染到到页面。
    3，用index作为key可能会引发的问题:
    1.若对数据进行:逆序添加、逆序删除等破坏顺序操作:
    会产生没有必要的真实DOM更新，界面效果没问题，但效率低。
    2，如果结构中还包含输入类的DOM:
    会产生错误DOM更新，界面有问题。
    4.开发中如何选择key
    1.最好使用每条数据的唯一标识作为key,比如id、手机号、身份证号、学号等唯一值.

    2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。

    7.assets 和 static 的区别

    这两个都是用来存放项目中所使用的静态资源文件。

    两者的区别：

    assets 中的文件在运行 npm run build 的时候会打包，简单来说就是会被压缩体积，代码格式化之类的。打包之后也会放到 static 中。

    static 中的文件则不会被打包。

    建议：将图片等未处理的文件放在 assets 中，打包减少体积。而对于第三方引入的一些资源文件如 iconfont.css 等可以放在 static 中，因为这些文件已经经过处理了。
     

    8.slot 插槽

    很多时候，我们封装了一个子组件之后，在父组件使用的时候，想添加一些 dom 元素，这个时候就可以使用 slot 插槽了，但是这些 dom 是否显示以及在哪里显示，则是看子组件中 slot 组件的位置了。

    9.怎么使 css 样式只在当前组件中生效

    在 style 上加 scoped 

    10.v-for的优先级比v-if优先级更高。一般使用的时候都把v-if写在v-for的父级元素身上

    11.怎么解决Vue中动态设置img的src不生效的问题？

    因为动态添加src被当做静态资源处理了，没有进行编译，所以要加上require。