VUE头条后台项目总结

VUE标签及属性

1、< template >

template是模板占位符，可以帮助我们包裹元素，但template并不会渲染在DOM节点中

，并且template还可以使用v-for等指令，vue实例绑定的元素内部的template标签不支持v-show指令，即v-show=”false”对template标签来说不起作用。但是此时的template标签支持v-if、v-else-if、v-else、v-for这些指令。

拓展：VUE生命周期，template和render函数渲染次序

2、< style scop >

加上scop表示样式作用域，只作用于当前文件。（不同文件的同名样式会导致冲突，后导入的包会覆盖之前的）

< style scop lang=“less”> 其中lang表示编译方式，默认是css

3、prop

• prop的作用就是父组件向子组件单向传递数据，该过程是单向的，传递的属性可以是静态的，也可以是动态的，可以是数字、字符串、数组、对象以及校验函数进行校验。

• 所有的prop都使得其父子组件之间形成了一个单向下行绑定：父组件的prop的更新会向下流动到子组件中，但反过来不行，这样就会防止从子组件意外改变父组件以及同级子组件的状态，从而导致应用的数据流难以理解。

• 每次父组件发生更新时，子组件中所有的prop都将刷新为最新的值，意味着不能在子组件内部改变prop，这样的话Vue会在控制台抛出一个警告。

• 在正常情况下，一般在父组件中通过v-bind定义一个动态值，子组件通过Prop接收该值，所以，很多人认为，Prop只能接收动态值。但是，其实Prop可以接受静态属性。

tips：由于HTML中的属性是不区分大小写的，所以当使用DOM中的模板（HTML中）时，驼峰写法需要转化为短横线写法。但是，如果使用字符串模板（JS中）时，不受限制，可以为所欲为。

4、 v-for ：key(diff算法)

面试题：react、vue中的key有什么作用？（key的内部原理）（diff算法）

1. 虚拟DOM中key的作用：
    key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】, 随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：
                                    
2.对比规则：
    (1).旧虚拟DOM中找到了与新虚拟DOM相同的key：
        ①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！
        ②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。

    (2).旧虚拟DOM中未找到与新虚拟DOM相同的key
        创建新的真实DOM，随后渲染到到页面。
                                            
3. 用index作为key可能会引发的问题：
    1. 若对数据进行：逆序添加、逆序删除等破坏顺序操作:
    会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。

    2. 如果结构中还包含输入类的DOM：
    会产生错误DOM更新 ==> 界面有问题。

4. 开发中如何选择key?:
    1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
    2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。

5、 .sync、.native、

6、插槽（slot）：匿名、具名、作用域

1. 作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 父组件 ===> 子组件 。

2. 分类：默认插槽、具名插槽、作用域插槽

3. 使用方式：

   1. 默认插槽：

      父组件中：
              <Category>
                 <div>html结构1</div>
              </Category>
      子组件中：
              <template>
                  <div>
                     <!-- 定义插槽 -->
                     <slot>插槽默认内容...</slot>
                  </div>
              </template>
      

   2. 具名插槽：

      父组件中：
              <Category>
                  <template slot="center">
                    <div>html结构1</div>
                  </template>
      
                  <template v-slot:footer>
                     <div>html结构2</div>
                  </template>
              </Category>
      子组件中：
              <template>
                  <div>
                     <!-- 定义插槽 -->
                     <slot name="center">插槽默认内容...</slot>
                     <slot name="footer">插槽默认内容...</slot>
                  </div>
              </template>
      

   3. 作用域插槽：

      1. 理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。（games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定）（子组件向父组件传递数据）

      2. 具体编码：

         父组件中：
                 <Category>
                     <template scope="scopeData">
                         <!-- 生成的是ul列表 -->
                         <ul>
                             <li v-for="g in scopeData.games" :key="g">{{g}}</li>
                         </ul>
                     </template>
                 </Category>
         
                 <Category>
                     <template slot-scope="scopeData">
                         <!-- 生成的是h4标题 -->
                         <h4 v-for="g in scopeData.games" :key="g">{{g}}</h4>
                     </template>
                 </Category>
         子组件中：
                 <template>
                     <div>
                         <slot :games="games"></slot>
                     </div>
                 </template>
                 
                 <script>
                     export default {
                         name:'Category',
                         props:['title'],
                         //数据在子组件自身
                         data() {
                             return {
                                 games:['红色警戒','穿越火线','劲舞团','超级玛丽']
                             }
                         },
                     }
                 </script>
         

删除文章失败？（JS大数字问题）

JavaScript 能够准确表示的整数范围在-2^53到2^53之间（不含两个端点），超过这个范围，无法精确表示这个值，这使得 JavaScript 不适合进行科学和金融方面的精确计算。

关于一些json方法：

JSON 的常规用途是同 web 服务器进行数据传输。

在从 web 服务器接收数据时，数据永远是字符串。

通过 JSON.parse() 解析数据，这些数据会成为 JavaScript 对象。

/*将服务器端接受的数据转换为js对象*/
JSON.parse()  

在向 web 服务器发送数据时，数据必须是字符串。

通过 JSON.stringify() 把 JavaScript 对象转换为字符串。

/*将js对象转换为字符串发送给服务器*/
JSON.stringify()  

json-bigint 会把超出 JS 安全整数范围的数字转为一个 BigNumber 类型的对象，对象数据是它内部的一个算法处理之后的，我们要做的就是在使用的时候转为字符串来使用。

axios 为了方便我们使用数据，它会在内部使用 JSON.parse() 把后端返回的数据转为 JavaScript 对象，

解决思路：
Axios 会在内部使用 JSON.parse 把后端返回的数据转为 JavaScript 数据对象。
所以解决思路就是：不要让 axios 使用 JSON.parse 来转换这个数据，而是使用 json-biginit 来做转换处理。
axios 提供了一个 API：transformResponse，在这里对返回的原数据进行操作